Back to Info card-guidelines

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

Info Card is used to contain promotional or emphasized information and is displayed either within a context, or as a full width layout block.

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/info-card@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

In a list

<ul class="if cards info two|three">
  <li class="if info-card" role="presentation">
    <span class="if title [number]">
      A title
    </span>
    <span class="if text">When you buy insurance online</span>
  </li>
  <li class="if info-card darkest" role="presentation">
    <span class="if title [number]">
      A title
    </span>
    <span class="if text">When you buy insurance online</span>
  </li>
  <li class="if info-card dark" role="presentation">
    <span class="if title [number]">
      A title
    </span>
    <span class="if text">When you buy insurance online</span>
  </li>
</ul>
<ul class="if cards info two|three">
  <li class="if" role="presentation">
    <a href="#" class="if info-card">
      <span class="if title [number]">
        A title
      </span>
      <span class="if text">When you buy insurance online</span>
      <span class="if arrow-animation"></span>
    </a>
  </li>
  <li class="if darkest" role="presentation">
    <a href="#" class="if info-card">
      <span class="if title [number]">
        A title
      </span>
      <span class="if text">When you buy insurance online</span>
      <span class="if arrow-animation"></span>
    </a>
  </li>
  <li class="if dark" role="presentation">
    <a href="#" class="if info-card">
      <span class="if title [number]">
        A title
      </span>
      <span class="if text">When you buy insurance online</span>
      <span class="if arrow-animation"></span>
    </a>
  </li>
</ul>

Standalone

<aside class="if info-card">
  <span class="if title [number]">
    A title
  </span>
  <span class="if text">When you buy insurance online</span>
</aside>
<a href="#" class="if info-card">
  <span class="if title [number]">
    A title
  </span>
  <span class="if text">When you buy insurance online</span>
  <span class="if arrow-animation"></span>
</a>

Full width

<div class="if info-card full" role="presentation">
  <span class="if title [number]">
    A title
  </span>
  <span class="if text">When you buy insurance online</span>
</div>

Number title

<div class="if info-card" role="presentation">
  <span class="if title number">
    20%
  </span>
  <span class="if text">When you buy insurance online</span>
</div>
Edit this section, Opens in new window

Accessibility

When the Info Card is not used as a link, and not part of a context (purely standalone or full width) remember to have the role="presentation" on the element.

If it is part of a context, use the aside element.

<div class="if info-card dark" role="presentation">
  <span class="if title">
    Best satisfied customers
  </span>
  <span class="if text">
    9 out of 10 customers renew with us. Our stable prices and good service mean that our customers stay with us.
  </span>
</div>
<aside class="if info-card dark">
  <span class="if title">
    Best satisfied customers
  </span>
  <span class="if text">
    9 out of 10 customers renew with us. Our stable prices and good service mean that our customers stay with us.
  </span>
</aside>
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
  • ๐Ÿ’ก Use separate element for arrow animation (1be449f), closes #472451

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

  • ๐Ÿงจ The markup for Info Cards has now changed! We use a separate element to

group the arrow animation for links.

  • ๐Ÿงจ 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.10.4 (2021-10-12)

Bug Fixes

  • ๐Ÿ› Fix positioning of link arrow (1cdbbdf)

13.9.2 (2021-09-30)

Bug Fixes

  • ๐Ÿ› Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Features

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