Skip to content

Header13.10.5

The Header component is used as a page header or category header.


$ npm i @if-design-system/header@13.10.5

Myrskyn aiheuttamat vahingot

Myrskyvahingon sattuessa tärkeintä on huolehtia, että ihmiset ja eläimet ovat turvassa sekä estää lisävahinkojen syntyminen.

Edit this section

Overview

The Header component is used as a page header or category header, or as a replacement for the Hero component on lower level pages.

Edit this section

Usage

Header

Forms

You can also have forms in the Header component:

Villaförsäkring

Header with form
Edit this section

Anatomy

Header
  1. Breadrumbs
  2. Title
  3. Lead paragraph (Optional)
  4. Primary action (Optional)
  5. Secondary Action (Optional)
Edit this section

Specs

Myrskyn aiheuttamat vahingot

Myrskyvahingon sattuessa tärkeintä on huolehtia, että ihmiset ja eläimet ovat turvassa sekä estää lisävahinkojen syntyminen.

Header
Edit this section

Implementation

<header class="if header">
  <div class="if container">
    <ol class="if breadcrumbs">
      <li class="if">
        <a class="if" href="/asds" title="If privat">If privat</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Försäkringar">Försäkringar</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Hemförsäkring">Hemförsäkring</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Villaförsäkring">Villaförsäkring</a>
      </li>
    </ol>
    <h1 class="if heading hero-title">Myrskyn aiheuttamat vahingot</h1>
    <p class="if text lead">
      Myrskyvahingon sattuessa tärkeintä on huolehtia, että ihmiset ja eläimet ovat turvassa sekä estää lisävahinkojen
      syntyminen.
    </p>
  </div>
</header>

With actions

<header class="if header">
  <div class="if container">
    <ol class="if breadcrumbs">
      <li class="if">
        <a class="if" href="/asds" title="If privat">If privat</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Försäkringar">Försäkringar</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Hemförsäkring">Hemförsäkring</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Villaförsäkring">Villaförsäkring</a>
      </li>
    </ol>
    <h1 class="if heading hero-title">Myrskyn aiheuttamat vahingot</h1>
    <p class="if text lead">
      Myrskyvahingon sattuessa tärkeintä on huolehtia, että ihmiset ja eläimet ovat turvassa sekä estää lisävahinkojen
      syntyminen.
    </p>
    <button type="button" class="if button primary cta" style="margin-right: 0px;">Start here</button>
    <button type="button" class="if button text">Text button</button>
  </div>
</header>
Edit this section

Contact us