CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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.8
- 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.
Table of Contents
Edit this section, Opens in new windowUsage
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.
- 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.
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"><span class="if icon ui arrow-right"></span></span>
List
You can apply the list
-class to cover the container with a narrower card
Specs
<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
- Blog post
Marit brakk ryggen pรฅ Bali๏ปฟ
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
<ol class="if cards articles">
<li class="if editorial-card across">
โฆ
</li>
</ol>
Reverse
You can also reverse across
editorial cards:
- Blog post
Marit brakk ryggen pรฅ Bali๏ปฟ
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
<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.
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.
Tokens
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) |
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
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
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)
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 fromif-design-system
toids-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
-
๐ก 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
bootstrap (6fc1ed8)
reinstall (da80dba)
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
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.3 (2021-08-16)
Bug Fixes
12.14.1 (2021-08-12)
Miscellaneous chores
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)
-
๐ค 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)