Special Classes

Callout

Example

ASCE is continuing to monitor the COVID-19 situation both internationally and domestically with guidance from federal, state and local governments and health officials.

View Markup

<div class="callout">
     <p>ASCE is continuing to monitor the COVID-19 situation both internationally and domestically with guidance from federal, state and local governments and health officials.</p>
</div>

Source:global-scss/_type.scss, line 620

Eyebrow

Examples

Default

Lorem ipsum

.-centered

Sets justify-content to center

Lorem ipsum

.-large

Increases font-size, font-weight, and stripe height

Lorem ipsum

.-lowercase

Normal letter spacing and no text-transformation

Lorem ipsum

View Markup

<p class="eyebrow {{modifier_class}}">Lorem ipsum</p>

Source:global-scss/_type.scss, line 223

Loader

Loading indicator.

Example

View Markup

<div class="loader"></div>

Source:global-scss/_global.scss, line 429

Modifier Backgrounds

.-bg-left: adds left aligned background pseudo element with border-radius on the right side on viewports >= 1600px.
.-bg-right: adds right aligned background pseudo element with border-radius on the left side on viewports >= 1600px.

Examples

Default

example text example arrow-link example external arrow-link

.-blue

Blue gradient

example text example arrow-link example external arrow-link

View Markup

<div class="kss-bg -bg-left {{modifier_class}}">
  <p>example text
    <a href="#" class="-arrow-link">example arrow-link</a>
    <a href="#" class="-arrow-link -external">example external arrow-link</a>
  </p>
</div>
<div class="kss-bg -bg-right {{modifier_class}}">
  <p>example text
    <a href="#" class="-arrow-link">example arrow-link</a>
    <a href="#" class="-arrow-link -external">example external arrow-link</a>
  </p>
</div>

Source:global-scss/_global.scss, line 170

Photo Credit

Example

firstName lastName

View Markup

<cite class="photo-credit">firstName lastName</cite>

Source:global-scss/_global.scss, line 288

Video Container

Attempts to size for 16:9 aspect ratio by setting padding-bottom: 56.25%;.
A list of children includes:

.placeholder
<embed>
<iframe>
<object>

Anything outside of the video container will be hidden.

Example

View Markup

<video-js
  id=""
  data-account="75114961001"
  data-player="SFtvStcMPG"
  data-embed="default"
  controls=""
  data-video-id="6251264724001"
  data-playlist-id=""
  data-application-id=""
  class="vjs-fluid">
</video-js
  class="video-container"
  controls width="250">
<script
  src="https://players.brightcove.net/75114961001/SFtvStcMPG_default/index.min.js">
</script>

Source:global-scss/_global.scss, line 111

WYSIWYG Image

Images within the rich-text component or using the WYSIWYG editor.

Examples

Default

firstName lastName

figcaption

.-center

Center

firstName lastName

figcaption

.-left

Left

firstName lastName

figcaption

.-left.-small

Small left

firstName lastName

figcaption

.-right

Right

firstName lastName

figcaption

.-right.-small

Small right

firstName lastName

figcaption

View Markup

<figure class="wysiwyg-image {{modifier_class}}">
  <img src="/images/fpo/icon-grid.jpeg" alt="image alt text">
  <cite class="wysiwyg-image-photo-credit">firstName lastName</cite>
  <figcaption>figcaption</figcaption>
</figure>

Source:global-scss/_global.scss, line 298