Skip to content
UGA Online Design System

Hero

Homepage Hero (Content Left)

Section titled “Homepage Hero (Content Left)”

This is the default layout of the homepage hero with the content aligned to the left.

There is a black gradient behind the text to ensure that the text is always accessible regardless of the background image.

Photo of Kristin Sayeski, Ph.D. faculty in Dyslexia

Commit to what inspires you. Get a degree online.

Kristin Sayeski, Ph.D.

Graduate Certificate in Dyslexia

Meet the Faculty 
<div class="cmp-hero">
  <picture>
    <source
      srcset="/images/2018colorsayeskih-3600.jpg"
      media="only screen and (min-width: 2560px)"
    />
    <source
      srcset="/images/2018colorsayeskih-2560.jpg"
      media="(min-width: 1800px)"
    />
    <source
      srcset="/images/2018colorsayeskih-1800.jpg"
      media="(min-width: 1200px)"
    />
    <source
      srcset="/images/2018colorsayeskih-1200.jpg"
      media="(min-width: 768px)"
    />
    <source
      srcset="/images/2018colorsayeskih-768.jpg"
      media="(min-width: 480px)"
    />
    <source
      srcset="/images/2018colorsayeskih-480.jpg"
      media="(min-width: 0px)"
    />
    <img
      class="cmp-hero__image"
      src="/images/2018colorsayeskih-480.jpg"
      alt="Photo of Kristin Sayeski, Ph.D. faculty in Dyslexia"
    />
  </picture>
  <div class="cmp-hero__container">
    <div class="cmp-hero__content">
      <h2
        class="cmp-heading-2"
        aria-label="Commit to what inspires you. Get a degree online."
      >
        Commit to what inspires you. Get a degree online.
      </h2>
      <p class="cmp-paragraph util-margin-all-none">Kristin Sayeski, Ph.D.</p>
      <p class="cmp-paragraph util-margin-all-none">
        Graduate Certificate in Dyslexia
      </p>
      <a
        href="#"
        class="cmp-button cmp-button--border util-margin-top-lg util-margin-top-xl@md"
      >
        Meet the Faculty
      </a>
    </div>
  </div>
  <div class="cmp-hero__action">
    <div class="cmp-hero__action-item">
      <button
        class="cmp-button cmp-button--full-width cmp-button--has-icon"
        type="button"
      >
        Certificates Online
        <svg
          class="cmp-button__icon cmp-button__icon--right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </button>
    </div>
    <div class="cmp-hero__action-item">
      <button
        class="cmp-button cmp-button--full-width cmp-button--has-icon"
        type="button"
      >
        Degree Online
        <svg
          class="cmp-button__icon cmp-button__icon--right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </button>
    </div>
    <div class="cmp-hero__action-item">
      <button
        class="cmp-button cmp-button--full-width cmp-button--has-icon"
        type="button"
      >
        Courses Online
        <svg
          class="cmp-button__icon cmp-button__icon--right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Homepage Hero (Content Right)

Section titled “Homepage Hero (Content Right)”

Homepage hero can also be aligned to the right by adding a modifier class of .cmp-hero--right to the parent element and .cmp-hero__container--right to the .cmp-hero__container element.

There is a black gradient behind the text to ensure that the text is always accessible regardless of the background image.

UGA campus

Commit to what inspires you. Get a degree online.

Faculty Name, Ph.D.

Program Name

Meet the Faculty 
<div class="cmp-hero cmp-hero--right">
  <picture>
    <img class="cmp-hero__image" src="/images/uga-hero.jpg" alt="UGA campus" />
  </picture>
  <div class="cmp-hero__container cmp-hero__container--right">
    <div class="cmp-hero__content">
      <h2
        class="cmp-heading-2"
        aria-label="Commit to what inspires you. Get a degree online."
      >
        Commit to what inspires you. Get a degree online.
      </h2>
      <p class="cmp-paragraph util-margin-all-none">Faculty Name, Ph.D.</p>
      <p class="cmp-paragraph util-margin-all-none">Program Name</p>
      <a
        href="#"
        class="cmp-button cmp-button--border util-margin-top-lg util-margin-top-xl@md"
      >
        Meet the Faculty
      </a>
    </div>
  </div>
  <div class="cmp-hero__action">
    <div class="cmp-hero__action-item">
      <button
        class="cmp-button cmp-button--full-width cmp-button--has-icon"
        type="button"
      >
        Certificates Online
        <svg
          class="cmp-button__icon cmp-button__icon--right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </button>
    </div>
    <div class="cmp-hero__action-item">
      <button
        class="cmp-button cmp-button--full-width cmp-button--has-icon"
        type="button"
      >
        Degree Online
        <svg
          class="cmp-button__icon cmp-button__icon--right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </button>
    </div>
    <div class="cmp-hero__action-item">
      <button
        class="cmp-button cmp-button--full-width cmp-button--has-icon"
        type="button"
      >
        Courses Online
        <svg
          class="cmp-button__icon cmp-button__icon--right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Hero Interior Left

Section titled “Hero Interior Left”

This is the default layout of the interior hero with the content aligned to the left. The interior hero can be used by adding a modifier class of .cmp-hero—interior to the parent element.

Photo of Kristin Sayeski, Ph.D. faculty in Dyslexia

Content Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Author Name

<div class="cmp-hero cmp-hero--interior">
  <picture>
    <source
      srcset="/images/2018colorsayeskih-3600.jpg"
      media="only screen and (min-width: 2560px)"
    />
    <source
      srcset="/images/2018colorsayeskih-2560.jpg"
      media="(min-width: 1800px)"
    />
    <source
      srcset="/images/2018colorsayeskih-1800.jpg"
      media="(min-width: 1200px)"
    />
    <source
      srcset="/images/2018colorsayeskih-1200.jpg"
      media="(min-width: 768px)"
    />
    <source
      srcset="/images/2018colorsayeskih-768.jpg"
      media="(min-width: 480px)"
    />
    <source
      srcset="/images/2018colorsayeskih-480.jpg"
      media="(min-width: 0px)"
    />
    <img
      class="cmp-hero__image"
      src="/images/2018colorsayeskih-480.jpg"
      alt="Photo of Kristin Sayeski, Ph.D. faculty in Dyslexia"
    />
  </picture>
  <div class="cmp-hero__container cmp-hero__container--pull-quote">
    <div class="cmp-hero__content cmp-hero__content--pull-quote">
      <h2 class="cmp-heading-2" aria-label="Content Headline">
        Content Headline
      </h2>
      <div class="util-pad-left-md util-pad-left-none@md">
        <p class="cmp-hero__pull-quote-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p class="cmp-hero__pull-quote-author">Author Name</p>
      </div>
    </div>
  </div>
</div>

Hero Interior Right

Section titled “Hero Interior Right”

The interior hero can also be aligned to the right by adding a modifier class of .cmp-hero--right to the parent element and .cmp-hero__container--right to the .cmp-hero__container element.

UGA campus

Content Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Author Name

<div class="cmp-hero cmp-hero--interior cmp-hero--right">
  <picture>
    <img class="cmp-hero__image" src="/images/uga-hero.jpg" alt="UGA campus" />
  </picture>
  <div
    class="cmp-hero__container cmp-hero__container--pull-quote cmp-hero__container--right"
  >
    <div class="cmp-hero__content cmp-hero__content--pull-quote">
      <h2 class="cmp-heading-2" aria-label="Content Headline">
        Content Headline
      </h2>
      <div class="util-pad-left-md util-pad-left-none@md">
        <p class="cmp-hero__pull-quote-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p class="cmp-hero__pull-quote-author">Author Name</p>
      </div>
    </div>
  </div>
</div>

Hero Without Quote

Section titled “Hero Without Quote”

This hero shows only the image with no text or border. Beginning at 50rem width (the md breakpoint), the image has a minimum height of 500px.

Photo of Kristin Sayeski, Ph.D. faculty in Dyslexia 
<div class="cmp-hero cmp-hero--noquote">
  <picture>
    <source
      srcset="/images/2018colorsayeskih-3600.jpg"
      media="only screen and (min-width: 2560px)"
    />
    <source
      srcset="/images/2018colorsayeskih-2560.jpg"
      media="(min-width: 1800px)"
    />
    <source
      srcset="/images/2018colorsayeskih-1800.jpg"
      media="(min-width: 1200px)"
    />
    <source
      srcset="/images/2018colorsayeskih-1200.jpg"
      media="(min-width: 768px)"
    />
    <source
      srcset="/images/2018colorsayeskih-768.jpg"
      media="(min-width: 480px)"
    />
    <source
      srcset="/images/2018colorsayeskih-480.jpg"
      media="(min-width: 0px)"
    />
    <img
      class="cmp-hero__image"
      src="/images/2018colorsayeskih-480.jpg"
      alt="Photo of Kristin Sayeski, Ph.D. faculty in Dyslexia"
    />
  </picture>
</div>