HighFive Design System

Organisms

Section Row: Standard

Basic

Example Section

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

<section id="section--example-section" class="section-row" aria-label="Example Section">

  <!-- .bg-container -->
  <div class="bg-container w-100 h-100 left-0 top-0">
    <div class="bg-color bg-gray-100 opacity-100"></div>
  </div>
  <!-- /.bg-container -->

  <!-- .container-fluid -->
  <div class="container-fluid default-width text-md-start">

    <div class="row justify-content-md-start">
      <div class="col-sm-10 col-md-7 col-lg-7 col-xl-6 col-xxl-6 first-lead">

        <h2 class="h1">Example Section</h2>

        <p><span>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?</span></p>

      </div>
    </div>

  </div>
  <!-- /.container-fluid -->

</section>

Background Image

Note that since we want the text white on top of the image, we are also setting the entire section background to black. This is for accessibility.

Example Section

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

<section id="section--example-section" class="section-row bg-black text-white" aria-label="Example Section">

  <!-- .bg-container -->
  <div class="bg-container w-100 h-100 left-0 top-0">
    <div class="bg-img" 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="bg-fade bg-x-black-transparent opacity-80"></div>
    <div class="bg-fade bg-x-transparent-maroon opacity-30"></div>
  </div>
  <!-- /.bg-container -->

  <!-- .container-fluid -->
  <div class="container-fluid default-width text-md-start">

    <div class="row justify-content-md-start">
      <div class="col-sm-10 col-md-7 col-lg-7 col-xl-6 col-xxl-6 first-lead">

        <h2 class="h1">Example Section</h2>

        <p><span>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?</span></p>

      </div>
    </div>

  </div>
  <!-- /.container-fluid -->

</section>
Organisms

Section Row: Side Image

Side Image Right

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?

Side Image Left

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

<section id="section--example-section" class="section-row" aria-label="Example Section">

  <!-- .bg-container -->
  <div class="bg-container position-relative w-100 h-px-300 mb-5 mt-n-px-100 position-md-absolute w-md-40 mb-md-0 h-md-100 right-md-0 mt-n-px-md-0 w-lg-50">
    <div class="bg-img" 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>
  <!-- /.bg-container -->

  <!-- .container-fluid -->
  <div class="container-fluid default-width text-md-start">

    <div class="row justify-content-md-start">
      <div class="col-md-7 col-lg-6 first-lead">
        
        <div class="px-4 px-md-5">
          <h2 class="h1">Side Image Right</h2>
          <p><span>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?</span></p>
        </div>
          
      </div>
    </div>

  </div>
  <!-- /.container-fluid -->

</section>

<section id="section--example-section" class="section-row" aria-label="Example Section">

  <!-- .bg-container -->
  <div class="bg-container position-relative w-100 h-px-300 mb-5 mt-n-px-100 position-md-absolute w-md-40 mb-md-0 h-md-100 left-md-0 mt-n-px-md-0 w-lg-50">
    <div class="bg-img" 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>
  <!-- /.bg-container -->

  <!-- .container-fluid -->
  <div class="container-fluid default-width text-md-start">

    <div class="row justify-content-md-end">
      <div class="col-md-7 col-lg-6 first-lead">
        
        <div class="px-4 px-md-5">
          <h2 class="h1">Side Image Left</h2>
          <p><span>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?</span></p>
        </div>
          
      </div>
    </div>

  </div>
  <!-- /.container-fluid -->

</section>