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-Helgesen22

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-Helgesen22
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-Helgesen22
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-Helgesen22
  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-Helgesen22
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-Helgesen22

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-Helgesen22

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-Helgesen22
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-Helgesen22

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

    BreakpointBottom margin
    default24px
    400px32px
    720px40px
    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-Helgesen22
    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-Helgesen22
    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