Skip to content

Editorial Card13.10.5

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


$ npm i @if-design-system/editorial-card@13.10.5

  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
Edit this section

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

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.

<ol class="if cards articles">  <li class="if editorial-card"></li>
  <li class="if editorial-card"></li></ol>
Edit this section

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

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
<ol class="if cards articles">
  <li class="if editorial-card list"></li>
</ol>

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
<ol class="if cards articles">
  <li class="if editorial-card across"></li>
</ol>

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
<ol class="if cards articles">
  <li class="if editorial-card across reverse"></li>
</ol>
Edit this section

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

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

Implementation

Here is the default card implementation code for HTML. Features implementation code is listed next to each feature element.

<ol class="if cards articles">
  <li class="if editorial-card">
    <div class="if content">
      <span class="if category">
        Blog post
      </span>
      <h3 class="if title heading small">
        <a href="/link/to/article" class="if"
          >Den viktigste grunnen til å forsikre hunden din<span class="if inline-nowrap"
            >&#xfeff;<span class="if icon ui arrow-right"></span></span
        ></a>
      </h3>
      <p class="if preview">
        Blir hunden din alvorlig syk, er det vondt å takke nei til livreddende behandling av økonomiske grunner. Med
        hundeforsikring slipper du det.
      </p>
      <div class="if meta">
        <ul class="if tags">
          <li class="if">
            <a href="/asd" class="if tag passive">Ta vare på hund</a>
          </li>
          <li class="if">
            <a href="/asds" class="if tag passive">Forsikringsguiden</a>
          </li>
          <li class="if">
            <a href="/asds" class="if tag passive">Valp</a>
          </li>
        </ul>
        <small class="if author text meta">Alexander Vassbotn Røyne-Helgesen</small>
        <small class="if extras">
          <time class="if" datetime="2020-04-20">04.20.2020</time><span class="if likes">12</span>
          <span class="if comments">22</span>
        </small>
      </div>
    </div>
    <span class="if image lifestyle">
      <img src="https://www.if.no/magasinet/imageshop/img_shp_img_zkexuttycm-780x470.jpeg" class="if" />
    </span>
  </li>
</ol>

The code below is to ensure that the arrow is not pushed down alone if the title is too long for one line.

<span class="if inline-nowrap">&#xfeff;<span class="if icon ui arrow-right"></span></span>

Javascript for image adjustments

To be able to have equal ratios on the images regardless of viewport, we recommend using this script.

import debounce from './debounce';

const mediumMQ = window.matchMedia('screen and (min-width: 720px)');
let isMediumMQ = true;

const setCardsImageHeight = () => {
  const selector = isMediumMQ ? '.if.editorial-card:not(.across):not(.list)' : '.if.editorial-card';
  const cards = document.querySelectorAll(selector);

  if (isMediumMQ) {
    const fullWidthCards = document.querySelectorAll('.if.editorial-card.across, .if.editorial-card.list');
    fullWidthCards.forEach(card => {
      const imageContainer = card.querySelector('.if.image');
      const image = card.querySelector('.if.image > img');
      if (!image) return;
      if (card.classList.contains('across')) {
        imageContainer.style.height = 'auto';
      }
      image.style.height = '100%';
    });
  }

  cards.forEach(card => {
    const imageContainer = card.querySelector('.if.image');
    const image = card.querySelector('.if.image > img');
    if (!image) return;
    const cardRect = card.getBoundingClientRect();
    const imageWidth = cardRect.width;
    const imageHeight = imageWidth * 0.5625;
    image.style.height = `${imageHeight}px`;
    imageContainer.style.height = `${imageHeight}px`;
  });
};

export default setCardsImageHeight;

setCardsImageHeight();

const handleMedium = mql => {
  if (mql.matches) {
    isMediumMQ = true;
  } else {
    isMediumMQ = false;
  }
};

mediumMQ.addListener(handleMedium);

handleMedium(mediumMQ);

import('../../lib/card').then(setCardsImageHeight => {
  setCardsImageHeight.default();

  const cardResizeEventFunc = debounce(function() {
    setCardsImageHeight.default();
  }, 300);

  window.addEventListener('resize', cardResizeEventFunc);
});
Edit this section

Accessibility

If the action for the card is something you need a button for, either use role="button" and put the click handler on that, or if it's a standalone card, use the button-element as a container.

If it is a link that is the primary action, the link should always be in the title, since that is the link that covers the card.

Edit this section
Contact us