Skip to content

Overview

The Navigational Card component allows the content author to easily create a link to further content using an image, title, or rich text and linking to further content or other actions.

Edit this section

Variations

Type Purpose
Studio Navigational Card
Lifestyle Navigational Card
Text Navigational Card
Image Navigational Card
Edit this section

Behaviours

Modifiers

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>

Text boxes

The Text Navigational Cards can be boxed in:

<ul class="if cards navigational text [one|two|three]" role="presentation">
  <li class="if">
    <a href="" 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>
  </li></ul>
Edit this section

Usage

Do not use buttons in navigational cards
Only use standalone links if you want a link displayed.
Edit this section

Anatomy

Studio Navigational Cards
  1. Studio image
  2. Title
  3. Description (optional)
Image Navigational Cards
  1. Image
  2. Title
Lifestyle Navigational Cards
  1. Lifestyle image
  2. Title
  3. Description
Text Navigational Cards
  1. Title
  2. Description
Text Navigational Cards

This example is in a two column layout, specially made for the Text Navigational Card.

<ul class="if cards navigational text two"></ul>
  1. Large title
  2. Description
Edit this section

Specs

Edit this section

Implementation

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>
  <li role="presentation" class="if">
    <a class="if navigational-card" href="/asd"></a>
  </li>
  <li role="presentation" class="if">
    <a class="if navigational-card" href="/asd"></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 [large]">
      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
Contact us