Back to Info card-guidelines

CSS ComponentThe latest version of this package is: 17.0.38, 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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/info-card@17.0.38
Preview

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

Tokens

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

Info-card tokens

Name Value Is aliased in
$ids-info-card-arrow-position
 relative
$ids-info-card-arrow-height
 2rem
$ids-info-card-arrow-width
 2rem
$ids-info-card-arrow-animation-position
 absolute
$ids-info-card-arrow-animation-top
 0
$ids-info-card-arrow-animation-left
 50%
$ids-info-card-arrow-animation-display
 block
$ids-info-card-arrow-animation-pointer-events
 none
$ids-info-card-arrow-animation-background-image
 url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Earrow right%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cline data-cap=%27butt%27 data-color=%27color-2%27 fill=%27none%27 stroke-miterlimit=%2710%27 x1=%272%27 y1=%2716%27 x2=%2730%27 y2=%2716%27 stroke-linecap=%27butt%27/%3E%3Cpolyline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 points=%2721,7 30,16 21,25 %27/%3E%3C/g%3E%3C/svg%3E')
$ids-info-card-arrow-animation-background-repeat
 no-repeat
$ids-info-card-arrow-animation-background-position
 center center
$ids-info-card-arrow-animation-transform origin
 center center
$ids-info-card-arrow-animation-transform
 translateX(-50%)
$ids-info-card-arrow-animation-transition
 all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1)
$ids-info-card-arrow-animation-after-opacity
 1
$ids-info-card-arrow-animation-before-opacity
 0
$ids-info-card-arrow-animation-before-transform
 translateX(calc(-50% - 2rem))
$ids-info-card-content-shrink
 0
$ids-info-card-content-grow
 0
$ids-info-card-content-spacing-between
 0.5rem
$ids-info-card-content-spacing-last-child
 0
$ids-info-card-content-font-size-media-query-base
 0.875rem
$ids-info-card-content-font-size-media-query-xs
 0.9375rem
$ids-info-card-content-font-size-media-query-md
 1rem
$ids-info-card-content-line-height
 1.5rem
$ids-info-card-content-letter-spacing
 normal
$ids-info-card-content-font-variation-settings-media-query-base
 'wght' 85
$ids-info-card-content-font-variation-settings-media-query-md
 'wght' 82
$ids-info-card-aside-content-spacing-between
 1rem
$ids-info-card-position
 relative
$ids-info-card-display
 flex
$ids-info-card-direction
 column
$ids-info-card-shrink
 0
$ids-info-card-grow
 0
$ids-info-card-height
 auto
$ids-info-card-width
 auto
$ids-info-card-padding
 2.5rem
$ids-info-card-border
 0.125rem solid rgb(51, 30, 17)
$ids-info-card-border-radius
 0.75rem
$ids-info-card-justify-content
 center
$ids-info-card-align-items
 center
$ids-info-card-text-align
 center
$ids-info-card-background-color
 transparent
$ids-info-card-color
 rgb(51, 30, 17)
$ids-info-card-text-decoration
 none
$ids-info-card-transition
 all 0.2s cubic-bezier(0.4, 0, 0.2, 1)
$ids-info-card-hover-color
 rgb(51, 30, 17)
$ids-info-card-hover-after-opacity
 0
$ids-info-card-hover-after-transform
 translateX(calc(-50% + 2rem))
$ids-info-card-hover-before-opacity
 1
$ids-info-card-hover-before-transform
 translateX(-50%)
$ids-info-card-darkest-hover-color
 rgb(250, 249, 247)
$ids-info-card-darkest-title-font-variation-settings-media-query-base
 'wght' 64
$ids-info-card-darkest-title-font-variation-settings-media-query-md
 'wght' 70
$ids-info-card-darkest-text-font-variation-settings-media-query-base
 'wght' 85
$ids-info-card-darkest-text-font-variation-settings-media-query-md
 'wght' 82
$ids-info-card-darkest-background-color
 rgb(51, 30, 17)
$ids-info-card-darkest-border-color
 transparent
$ids-info-card-darkest-color
 rgb(250, 249, 247)
$ids-info-card-darkest-arrow-animation-background-image
 url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Earrow right%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%23Faf9f7%27 stroke=%27%23Faf9f7%27%3E%3Cline data-cap=%27butt%27 data-color=%27color-2%27 fill=%27none%27 stroke-miterlimit=%2710%27 x1=%272%27 y1=%2716%27 x2=%2730%27 y2=%2716%27 stroke-linecap=%27butt%27/%3E%3Cpolyline fill=%27none%27 stroke=%27%23Faf9f7%27 stroke-miterlimit=%2710%27 points=%2721,7 30,16 21,25 %27/%3E%3C/g%3E%3C/svg%3E')
$ids-info-card-focus-outline
 none
$ids-info-card-focus-after-opacity
 0
$ids-info-card-focus-after-transform
 translateX(calc(-50% + 2rem))
$ids-info-card-focus-before-opacity
 1
$ids-info-card-focus-before-transform
 translateX(-50%)
$ids-info-card-title-text-rendering
 optimizeLegibility
$ids-info-card-title-font-size-media-query-base
 1.25rem
$ids-info-card-title-font-size-media-query-xxs
 1.375rem
$ids-info-card-title-font-size-media-query-xs
 1.5rem
$ids-info-card-title-font-size-media-query-md
 2rem
$ids-info-card-title-line-height-media-query-base
 2rem
$ids-info-card-title-line-height-media-query-md
 2.625rem
$ids-info-card-title-letter-spacing
 normal
$ids-info-card-title-font-variation-settings-media-query-base
 'wght' 64
$ids-info-card-title-font-variation-settings-media-query-md
 'wght' 50
$ids-info-card-title-font-family
 If Sans Light
$ids-info-card-title-font-weight
 normal
$ids-info-card-title-number-font-size-media-query-base
 1.5rem
$ids-info-card-title-number-font-size-media-query-xxs
 1.625rem
$ids-info-card-title-number-font-size-media-query-xs
 1.75rem
$ids-info-card-title-number-font-size-media-query-md
 2.625rem
$ids-info-card-title-number-line-height-media-query-base
 2.5rem
$ids-info-card-title-number-line-height-media-query-md
 3.5rem
$ids-info-card-title-number-font-variation-settings-media-query-base
 'wght' 54
$ids-info-card-title-number-font-variation-settings-media-query-md
 'wght' 45
$ids-info-card-dark-background-color
 rgb(232, 224, 217)
$ids-info-card-dark-border-color
 transparent
$ids-info-card-full-width
 100%
$ids-info-card-full-height
 auto
$ids-info-card-right-margin-left-media-query-smlr
 auto
$ids-info-card-left-margin-right-media-query-smlr
 auto
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.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

  • The info card component now has rounded corners - 12px

  • Merged PR 101608: feat(info-card): VID update (fc3d421), closes #686982 #686982

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)

14.3.0 (2022-02-09)

Bug Fixes

  • Use correct vars and mixins (f879b28)

  • 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

  • Remove redundant background styles (2b41f37)

  • 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
  • 🧨 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!

Documentation Updates

  • ✏️ Make variations tables more condensed (4344a3a)

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Split out CSS documentation (fbb776c) , closes #467386

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

  • use highlight class instead of style (b500ac6)

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • 💡 Use separate element for arrow animation (1be449f) , closes #472451

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • update examples and demo file (eb3c701)

  • use correct version for utils (49e72d9)

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) . ✅ Closes: 485724

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)

Features

Documentation Updates

Typo (22c6ea2)

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