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, Opens in new window

Variations

Type Purpose
Studio Navigational Card
Lifestyle Navigational Card
Text Navigational Card
Image Navigational Card
Edit this section, Opens in new window

Behaviours

Interactions

Hover

Hover
  1. Fill color is derived based on which block that is parent
  2. Image is scaled up 4%
Hover
  1. Image is scaled up 4%
Hover
  1. Image is scaled up 4%
  2. Title

Focus

Focus

2px dottet outline with 2px offset and color BL 1, BLUE.

Text boxes

The Text Navigational Cards can be boxed in:

Edit this section, Opens in new window

Usage

  • Hitta rätt elbil för dig 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å.
  • Vilken hundras ska du välja? Drömmer du också om en hund? För att hundlivet ska bli så bra som möjligt bör du välja en ras som passar dig, din livsstil och hundvana.
  • Få hjälp med ditt byggprojekt Om du planerar att bygga om huset, bygga altan, attefallshus eller växthus kan du få kostnadsfri hjälp med ditt byggprojekt av vår byggrådgivning.
Do not use buttons in navigational cards
  • Hitta rätt elbil för dig 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å. Standalone link
  • Vilken hundras ska du välja? Drömmer du också om en hund? För att hundlivet ska bli så bra som möjligt bör du välja en ras som passar dig, din livsstil och hundvana. Standalone link
  • Få hjälp med ditt byggprojekt Om du planerar att bygga om huset, bygga altan, attefallshus eller växthus kan du få kostnadsfri hjälp med ditt byggprojekt av vår byggrådgivning. Standalone link
Only use standalone links if you want a link displayed.
Edit this section, Opens in new window

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
  • Hitta rätt elbil för dig 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å. Så fungerar..
  • Vilken hundras ska du välja? Drömmer du också om en hund? För att hundlivet ska bli så bra som möjligt bör du välja en ras som passar dig, din livsstil och hundvana. Lorum ipsum dolor sit amet. Så fungerar..
  • Få hjälp med ditt byggprojekt Om du planerar att bygga om huset, bygga altan, attefallshus eller växthus kan du få kostnadsfri hjälp med ditt byggprojekt av vår byggrådgivning. Så fungerar..
  • Få hjälp med ditt byggprojekt Om du planerar att bygga om huset, bygga altan, attefallshus eller växthus kan du få kostnadsfri hjälp med ditt byggprojekt av vår byggrådgivning. Så fungerar..
Text Navigational Cards

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

  1. Title
  2. Description
Edit this section, Opens in new window

Specs

  • Hitta rätt elbil för dig 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å. Så fungerar..
  • Vilken hundras ska du välja? Drömmer du också om en hund? För att hundlivet ska bli så bra som möjligt bör du välja en ras som passar dig, din livsstil och hundvana. Så fungerar..
  • Få hjälp med ditt byggprojekt Om du planerar att bygga om huset, bygga altan, attefallshus eller växthus kan du få kostnadsfri hjälp med ditt byggprojekt av vår byggrådgivning. Så fungerar..
Edit this section, Opens in new window
Contact us, Opens in new window