Back to Editorial Card-guidelines

CSS ComponentThe latest version of this package is: 17.0.30-alpha.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@17.0.30-alpha.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-Helgesen22

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.

  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

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

Tokens

All of the tokens can be used as preprocessor and CSS variables

Editorial Card tokens

Name Value
$ids-editorial-card-position
relative
$ids-editorial-card-display
flex
$ids-editorial-card-direction
column
$ids-editorial-card-shrink
0
$ids-editorial-card-grow
0
$ids-editorial-card-width
100%
$ids-editorial-card-height
100%
$ids-editorial-card-min-height
11.25rem
$ids-editorial-card-border-radius
0.75rem
$ids-editorial-card-background-color
rgb(250, 249, 247)
$ids-editorial-card-color-default
rgb(51, 30, 17)
$ids-editorial-card-color-subtle
rgb(110, 98, 94)
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.

16.0.0 (2023-01-10)

โš  BREAKING CHANGES

  • The editorial card now has rounded corners - 12px.

  • Merged PR 101240: feat(editorial-card): VID update for editorial card - rounded corners (6fbb643), closes #686976 #686976

14.28.0 (2022-08-22)

Features

  • editorial-card: add CSS variables and design tokens for Editorial Card (f029674)

Bug Fixes

  • editorial-card: replace missing images with a placeholder image (4fc6f5e) , closes #618868

Documentation Updates

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • ๐Ÿ› Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • ๐Ÿ› Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

  • ๐Ÿ’ก Change focus styles, remove whatinput (75fd31b) , closes #505205

  • rebuild and reinstall (f9fb687)

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

โš  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!

Documentation Updates

  • โœ๏ธ Move position of the quick links (5cb0897)

  • โœ๏ธ Remove unneeded margins for shortcuts (36c7e8d)

  • โœ๏ธ Split out CSS documentation for Editorial Card (79ad550) , closes #467386

  • โœ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579

Code Refactoring

  • ๐Ÿ’ก Categorize components (9965266) , closes #490579

  • ๐Ÿ’ก Reduce spacing tokens, use correct size tokens (97aa461)

  • ๐Ÿ’ก Remove manual box-shadow on example (5cd6477)

  • ๐Ÿ’ก Rename scope and repository (3ea5423)

  • ๐Ÿ’ก Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

  • ๐Ÿค– Prune changelogs (2c660c2)

  • ๐Ÿค– Rename util to utils (f78721f)

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

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.7.0 (2021-09-22)

Documentation Updates

  • โœ๏ธ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

  • ๐Ÿค– Use node v14 (4009973)

bootstrap (d23e139)

  • ๐Ÿค– Use correct order for diff (cc6a4fd)

12.14.3 (2021-08-16)

Bug Fixes

  • ๐Ÿ› Use correct class names for editorial card demo/dev (633cbaf) , closes #458033

12.14.1 (2021-08-12)

Miscellaneous chores

  • ๐Ÿค– Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

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)

  • ๐Ÿค– Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • ๐Ÿค– Reinstall (e660696)

  • ๐Ÿค– Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)

  • ๐Ÿ› We don't need lastModified (e458a12)

12.3.0 (2021-05-19)

Documentation Updates

  • โœ๏ธ Documentation fixes (ad1882a)

12.0.0 (2021-05-05)

โš  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.

Features

  • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

  • ๐Ÿ› Fix cascading side effect after converting card to edito (005ea4a) . rial card

Documentation Updates

  • โœ๏ธ Adjust documentation heading levels (76b32bf)

Code Refactoring

  • ๐Ÿ’ก Rename and consolidate mixins (67cf470) , closes #268081

  • ๐Ÿ’ก Rename card to editorial card. Card is a pattern (8612222) , closes #336508

  • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508

  • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239) , closes #336508

  • ๐Ÿ’ก Rename Notification to Alert Banner (8b4e48d) , closes #336508

Miscellaneous chores

  • ๐Ÿค– Make sure all components are named with capital first (08e9a26)

  • ๐Ÿค– Reinstall (2c763ea)

  • ๐Ÿค– Reinstall (69e1a5b)

  • ๐Ÿค– Updating links (70f166e)

  • ๐Ÿค– Use correct name in readme (c48f28c)

rebuild (7edb430)

Edit this section, Opens in new window
Contact us, Opens in new window