Unique homepage elements

Background

The homepage is set on SeMI’s Vivid Pink and is further decorated with a background image.

Background image

Homepage card

Cards on the homepage differ from the standard Cards component. Homepage cards are set in a rectangular frame rather than the familiar rounded SeMI cards. Furthermore; the buttons in the cards are set in Almost Black on white.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Button text
  • Veritatis quas earum natus, soluta expedita doloribus.

    Button text

HTML code snippet

<section class="page--home">
    <ul class="cards">
        <li class="card">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <a class="button" href="#">Button text</a>
        </li>
        <li class="card">
            <p>Veritatis quas earum natus, soluta expedita doloribus.</p>
            <a class="button" href="#">Button text</a>
        </li>
    </ul>
</section>

Homepage heading level one

The main heading on the homepage is different from the standard headings in size, color, and style. Normal text is set in white, with emphasized text set in Almost Black.

Heading level one lorem ipsum dolor sit amet, consectetur adipisicing elit

Homepage Call-to-action button

The Call-to-action button on the homepage differs from the standard Call-to-action button. The text on the inactive state of the button is Almost Black, rather than white on the standard Call-to-action button. Rather than being aligned to the page grid, the button is right-aligned to the preceding paragraph.

Homepage Call-to-action button

HTML code snippet

<section class="page--home">
    <p class="paragraph--right-aligned">
        <a class="button button--cta" href="#">Homepage Call-to-action button</a>
    </p>
</section>