CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
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>
In a list as links
<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>
Standalone as a link
<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>
Tokens
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 |
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>
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
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
- use correct versions (f1b5deb)
14.3.0 (2022-02-09)
Bug Fixes
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 fromif-design-system
toids-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
-
๐ก 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)
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)
- use correct version (98775ec)