Back to components

Editorial Card

Editorial cards are cards specifically made for blogs, publications and news. They can have larger sizes with more emphasize on the images.

  1. Blog post

    Skoleroboten AV1 blir en del av Ifs barneforsikring

    Selv om skolene nå åpner opp er det mange barn som fortsatt ikke får møtt klassekameratene sine som følge av koronapandemien. Derfor tar If klasserommet hjem til barna.

    Alexander Vassbotn Røyne-Helgesen 22

Table of Contents

Edit this section, Opens in new window

Overview

Editorial cards are cards specifically made for blogs, publications and news. They can have larger sizes with more emphasize on the images.

Edit this section, Opens in new window

Usage

Cards are rarely placed alone, but in a collection of cards, like a deck. All cards can be standalone, but when put together, they should be in a list.

Edit this section, Opens in new window

Behaviours

Interaction

Primary action

The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a subject.

If you click anywhere in the card, the main link in the title is the active one. Only other links accessible is the tags.

  1. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22
Hovered
  1. Action area
  2. Content area
  3. Image area

Hover

  1. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22
Hovered
  1. Arrow appears
  2. Image is scaled up by 4%

Focus

  1. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22
  2. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22
Style

The focus state color is BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

  1. When the main link for the card is focused
  2. When any other links, like tags are focused
Edit this section, Opens in new window

Modifiers

List

You can apply the list-class to cover the container with a narrower card

Be sure to use correctly cropped image for this modification!

Specs

  1. Documentation

    Latest package sent

    We have now shipped..

    Alexander Vassbotn Røyne-Helgesen 22

Across

You can apply the across-class to cover the container with a card

Specs

  1. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22

Reverse

You can also reverse across editorial cards:

  1. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22
Edit this section, Opens in new window

Specs

  1. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22

The .if.cards.articles-container has a margin bottom to push down the content

Breakpoint Bottom margin
default 24px
400px 32px
720px 40px
Edit this section, Opens in new window

Anatomy

  1. Blog post

    Marit brakk ryggen på Bali

    Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.

    Alexander Vassbotn Røyne-Helgesen 22
Editorial card
  1. Category
  2. Title
  3. Preview
  4. Tags
  5. Author
  6. Date and SoMe interactions (optional)
  7. Image
  1. Blog post

    Se videoen: Klippet over seks vaierlåser på 30 sekunder

    Hvor godt bekytter vaierlåser egentlig mot sykkeltyveri? Ikke så veldig, viser dette eksperimentet. Sjekk videoen!

    Alexander Vassbotn Røyne-Helgesen 22
Style
  1. The fill color is BE 5, LIGHTEST BEIGE
  2. The text color is LB 1, LIGHT BROWN
  3. The text color is BR 1, BROWN
  4. The text color is BR 1, BROWN
  5. The text color is LB 1, LIGHT BROWN
  6. The text color is LB 1, LIGHT BROWN
Edit this section, Opens in new window
Contact us, Opens in new window