Page Sections

This page contains code snippets that create reusable page sections.

<section class="page-section" style="" id="">
    <div class="container">
        <div class="inner">

            <!-- content goes here -->

        </div><!-- .inner -->
    </div><!-- .container -->
</section>

Section Layout Classes

  • content-layout_hero
    • Sets H1 font-size to 64px
    • On home page, sets section to display:flex; and vertically centers content

Section Container Sizing Classes

  • container-width_sm
    • Sets section container max-width to 555px
  • container-width_md
    • Sets section container max-width to 750px
  • container-width_full
    • Removes section container max-width
  • container-padding_one-and-a-half
    • Sets container top/bottom padding to 1.5x standard
  • container-padding_double
    • Sets container top/bottom padding to 2x standard
  • container-padding_half
    • Sets container top/bottom padding to 0.5x standard

Section Background Classes

  • bg-lightgray
    • Light gray solid-color background
  • bg-green
    • Green solid-color background
  • bg-blue
    • Blue solid-color background
  • bg-skyblue
    • Sky blue solid-color background
  • bg-orange
    • Orange solid-color background
  • bg-purple
    • Purple solid-color background
  • bg-pink
    • Pink solid-color background
  • bg-yellow
    • Yellow solid-color background
  • bg-green-striped
    • Adds green striped background image green striped background
  • bg-purple-striped
    • Adds purple striped background image purple striped background
  • bg-blue-striped
    • Adds blue striped background image blue striped background
  • bg-shadow
    • Adds inset box-shadow to top and bottom of section

Specific Section Classes

  • page-section_company-values
    • Elements with class ".col" have 60px bottom margin
  • page-section_dream-team-photo
    • Direct section child ".inner" has 0px height, overflow hidden, and 66% bottom padding
    • Allows for fixed-aspect-ratio background image with no content
  • page-section_our-founders
    • Sets up styles for founder photos (img with class of .founder-photo)
  • page-section_cta
    • Gives links with class ".btn" 100% width, 368px max-width, and 400 font-weight