HighFive Design System

Molecules

Card: Basic

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

HTML

<div class="card">

  <div class="card-body text-black">
    <h2 class="text-maroon">Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
  </div>

</div>
Molecules

Card: Header

Example Card Header

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

HTML

<div class="card">

  <div class="card-header bg-maroon text-white">
    Example Card Header
  </div>

  <div class="card-body text-black">
    <h2 class="text-maroon">Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
  </div>

</div>
Molecules

Card: Image

decorative

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

HTML

<div class="card">

  <img class="card-img-top lazy no-offset m-0" src="https://www.its.msstate.edu/sites/www.its.msstate.edu/files/styles/msstatedrupal_extra_large/public/2023-08/Dak_Welcome_Celebration_2023041420230414_G5C9558.jpg" alt="decorative">

  <div class="card-body text-black">
    <h2 class="text-maroon">Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
  </div>

</div>
Molecules

Card: Background Image

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

HTML

<div class="card">

  <div class="bg-cover lazy ratio ratio-16x9" style="background-image:url(https://www.its.msstate.edu/sites/www.its.msstate.edu/files/styles/msstatedrupal_extra_large/public/2023-08/Dak_Welcome_Celebration_2023041420230414_G5C9558.jpg);">
  </div>

  <div class="card-body text-black">
    <h2 class="text-maroon">Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
  </div>

</div>
Molecules

Card: List Group / Files List

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

Link Item 1

Text for link item 1

HTML

<div class="card">

  <div class="card-body text-black">
    <h2 class="text-maroon">Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
  </div>

  <div class="list-group files-list list-group-flush border-top font-size-80">
    <a href="https://www.msstate.edu" class="list-group-item list-group-item-action">
      Link Item 1
      <div class="d-block mt-2 font-size-80 lh-sm remove-last-p-margin remove-last-ul-margin">
        <p>Text for link item 1</p>
      </div>
    </a>
  </div>

</div>
Molecules

Card: Bottom Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

Learn More

HTML

<div class="card">
  
  <div class="card-body text-black">
    <h2 class="text-maroon">Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
  </div>

  <a class="btn btn-primary fw-normal text-center font-size-70 py-2 external" href="https://www.msstate.edu">Learn More<span class="fas fa-external-link-alt font-size-60 ms-2"></span></a>

</div>
Molecules

Card: Overlay

HTML

<a class="card card-overlay" href="https://www.msstate.edu">

  <div class="ratio ratio-16x9 bg-cover"
    style="background-image:url(https://www.its.msstate.edu/sites/www.its.msstate.edu/files/styles/msstatedrupal_extra_large/public/2023-08/Dak_Welcome_Celebration_2023041420230414_G5C9558.jpg)">
    <div class="bg-y-transparent-black opacity-70 h-60 bottom-0"></div>
    <div class="bg-x-transparent-maroon opacity-20"></div>
    <div class="hover-show h-100 w-100">
      <div class="bg-maroon opacity-80 h-100 w-100"></div>
    </div>
  </div>

  <div class="text-white card-img-overlay bottom-0">
    <h3 class="mb-2 text-white">Card Title</h3>
    <p class="m-0 small hover-show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
    <p class="mt-3 mb-0 text-uppercase font-size-70">Learn More</p>
  </div>

</a>