Back to Navigational Card-guidelines

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

Navigational Cards are used to link to important pages, like product pages

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/navigational-card@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Container

The Navigational Cards container, .cards.navigational, can be modified with the classes one, two or three for a desired layout.

<ul class="if cards navigational [lifestyle|text|image] [one|two|three]" role="presentation"></ul>

Studio Navigational Card Implementation

<ul role="presentation" class="if cards navigational [one|two|three]">
  <li role="presentation" class="if">
    <a class="if navigational-card" href="/asd">
      <img
        class="if image"
        src="https://if-design-cdn.azureedge.net/images/documentation/studio/If-studio-documents-IFS-04772_PNG.PNG"
      />
      <p class="if text lead">
        <span class="if">Asiakaspalvelu</span>
      </p>
      <p class="if text meta">Asiakaspalvelu ja yhteystiedot</p>
    </a>
  </li>
</ul>

Text Navigational Card Implementation

<ul class="if cards navigational [one|two|three] text">
  <li class="if navigational-card text [box]">
    <span class="if title">
      Hitta rätt elbil för dig
    </span>
    <span class="if text">
      Antalet el- och laddhybrider ökar kraftigt på marknaden. Vi hjälper dig att hitta en elbil som passar ditt behov
      och vad du behöver tänka på.
    </span>
    <a href="/addsadad" class="if standalone">Så fungerar..</a>
  </li></ul>

Image Navigational Card Implementation

<ul class="if cards navigational image [one|two|three|four]">
  <li class="if">
    <a href="/asdsadsa" class="if navigational-card image">
      <span class="if image"><img src="https://v.imgi.no/85q28mh42c-MOODBOARD/980" class="if"/></span>
      <span class="if title">
        Hitta rätt elbil för dig
      </span>
    </a>
  </li>
</ul></ul>

Lifestyle Navigational Card Implementation

<ul class="if cards navigational [one|two|three] lifestyle">
  <li class="if">
    <a href="/asdsadsa" class="if navigational-card lifestyle">
      <span class="if image"><img src="https://v.imgi.no/uymteuljgs-SQUARE/400" class="if"/></span>
      <span class="if title">
        Hitta rätt elbil för dig
      </span>
      <span class="if text">
        Antalet el- och laddhybrider ökar kraftigt på marknaden. Vi hjälper dig att hitta en elbil som passar ditt behov
        och vad du behöver tänka på.
      </span>
    </a>
  </li></ul>
<ul class="if cards navigational [one|two|three] lifestyle">
  <li class="if navigational-card lifestyle">
    <span class="if image"><img src="https://v.imgi.no/uymteuljgs-SQUARE/400" class="if"/></span>
    <span class="if title">
      Hitta rätt elbil för dig
    </span>

    <span class="if text">
      Antalet el- och laddhybrider ökar kraftigt på marknaden. Vi hjälper dig att hitta en elbil som passar ditt behov
      och vad du behöver tänka på.
    </span>
    <a class="if standalone" href="/asds">Standalone link</a>
  </li></ul>
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)

Bug Fixes

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

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

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

Features

  • 🎸 Add support for download and external links (0be46dc)

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!

13.12.0 (2021-10-22)

Bug Fixes

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.3 (2021-09-30)

Bug Fixes

  • 🐛 Adjust layout for navigational cards between 400-720 (7463b1d), closes #475423

13.9.2 (2021-09-30)

Bug Fixes

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

13.6.3 (2021-09-17)

Bug Fixes

13.5.0 (2021-09-06)

Bug Fixes

  • 🐛 Fix inheritance issue (be90f4a)

13.4.0 (2021-09-03)

Features

  • 🎸 Add image card and new design for all navigational cards (f6c7fa3), closes #466449

13.0.0 (2021-08-25)

chore

  • 🤖 Remove IE11 support from navigational-card (870c3f7), closes #336127

BREAKING CHANGES

  • 🧨 We are removing IE11 support

12.13.1 (2021-08-11)

Bug Fixes

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)

Bug Fixes

  • 🐛 Fix some layout bugs with navigational cards (565db7f)

Code Refactoring

Features

  • 🎸 Add new component Navigational Card (569807c), closes #336508
  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Teasers are no more. It has been replaces with Lifestyle Navigational

Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks

  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer
  • 🧨 This component is extracted from the Studio Crosslinks and is a

replacement for it.

Edit this section, Opens in new window
Contact us, Opens in new window