Back to Hero Navigation-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

A Hero Navigation is used on a category landing page, for navigation.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/hero-navigation@14.1.0

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Table of Contents

Edit this section, Opens in new window

Usage

To change the views, when a user clicks the primary button, add .is-active and .step-1 for the first step, and .step-2 for the last step to <div class="if content navigation">.

To use a lifestyle image in the Hero Navigation, add lifestyle to the image container:

  <div class="if transform blur">
    <div class="if image lifestyle"></div>
  </div>
</div>
<section class="if hero-navigation">
  <div class="if container">
    <div class="if content">
      <h1 class="if heading larger">Det oknepiga försäkringsbolaget</h1>
      <p class="if text lead">
        Skaffa rätt skydd för ditt hem och dina saker
      </p>
      <button type="button" class="if button primary large">Hitta försäkring</button>
    </div>
    <nav class="if content navigation">
      <button type="button" class="if navigation back">Tilbaka</button>
      <button type="button" class="if navigation back step-2">Tilbaka</button>
      <div class="if navigation-container">
        <ul class="if navigation-list">
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Koitini ja muu oimusitinen</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Bilforsäkring" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/BMW mc-märkesförsäkring" class="if navigation-link"
                  >BMW mc-märkesförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/MC försäkring" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Mopedförsäkring" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Husbilsförsäkring" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Husvagnförsäkring" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Lätt lastbilsförsäkring" class="if navigation-link"
                  >Lätt lastbilsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Släpvagnsförsäkring" class="if navigation-link"
                  >Släpvagnsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/ATV-försäkring" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Snöskoterförsäkring" class="if navigation-link"
                  >Snöskoterförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Samlarfordonsförsäkring" class="if navigation-link"
                  >Samlarfordonsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Placeholder" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Placeholder" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Hus och Hem</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Person</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Resa</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Djur</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Båt</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <div class="if transform blur">
      <div
        class="if image studio"
        style="background-image: url(https://design.if.eu/images/hug.png);background-size: cover;background-position: center top;"
      ></div>
    </div>
  </div>
</section>

Sizing

If you are having issues regarding too many navigation items, resulting in overflow, you can adjust the height of the Hero Navigation like this:

<style type="text/css">
  @media screen and (min-width: 45rem) {
    .if.hero-navigation > .if.container > .if.transform.blur {
      height: 520px;
    }

    .if.hero-navigation > .if.container {
      min-height: 520px;
      height: auto;
    }

    .if.hero-navigation,
    .if.hero.reverse.navigation {
      min-height: 520px;
      height: 520px;
    }

    .if.hero-navigation > .if.container > .if.transform.blur > .if.image {
      max-height: 520px;
    }
  }
</style>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Split out CSS documentation and JS code (5cc6bef), closes #467386
  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!
  • 🧨 The JavaScript for the Hero Navigation is moved to separate package:

@ids-js/hero-navigation

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

12.15.1 (2021-08-24)

Bug Fixes

  • 🐛 Use correct demo files, updated dev files (f53434b), closes #459841

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 The Hero Navigation is now extracted from the Hero component
Edit this section, Opens in new window
Contact us, Opens in new window