Back to Editorial Card-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

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

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/editorial-card@14.1.0

  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

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>

Default markup

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"
          >Skoleroboten AV1 blir en del av Ifs barneforsikring<span class="if inline-nowrap"
            >&#xfeff;<span class="if icon ui arrow-right"></span></span
        ></a>
      </h3>
      <p class="if preview">
        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.
      </p>
      <div class="if meta">
        <ul class="if tags">
          <li class="if">
            <a href="/asd" class="if tag passive">Aktuelt</a>
          </li>
          <li class="if">
            <a href="/asds" class="if tag passive">Første barn</a>
          </li>
        </ul>
        <small class="if author">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/images/2020/04/av1-in-group-work-1560x900.jpg" 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>

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>

Set correct image height

You can use the @ids-js/card package to set a constant/better image ratio on your card images, please read the docs here.

Edit this section, Opens in new window

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

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

12.14.3 (2021-08-16)

Bug Fixes

  • 🐛 Use correct class names for editorial card demo/dev (633cbaf), closes #458033

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912
  • 🐛 Use correct filename for demo file (cbe3113)

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

  • 🐛 Fix cascading side effect after converting card to edito (005ea4a)

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer
  • 🧨 Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

  • 🧨 Renamed card to editorial card, since the card concept is a pattern.

10.0.0 (2021-02-15)

Bug Fixes

  • 🐛 Easen up the img selector for cards (17fe087)

7.11.0 (2020-12-08)

Features

  • 🎸 Add support for SoMe interactions and date for ed.cards (46905c4), closes #314427

6.38.0 (2020-10-19)

Features

  • 🎸 Add new component card (9cb16bf)
  • 🎸 Add new component editorial card (7422c0c)
Edit this section, Opens in new window
Contact us, Opens in new window