Editorial Card
Editorial cards are cards specifically made for blogs, publications and news. They can have larger sizes with more emphasize on the images.
- 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 windowOverview
Editorial cards are cards specifically made for blogs, publications and news. They can have larger sizes with more emphasize on the images.
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.
Behaviours
Interaction
Primary action
The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a subject.
If you click anywhere in the card, the main link in the title is the active one. Only other links accessible is the tags.
- Blog post
Marit brakk ryggen på Bali
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
- Action area
- Content area
- Image area
Hover
- Blog post
Marit brakk ryggen på Bali
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
- Arrow appears
- Image is scaled up by 4%
Focus
- Blog post
Marit brakk ryggen på Bali
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
- Blog post
Marit brakk ryggen på Bali
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
The focus state color is BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.
- When the main link for the card is focused
- When any other links, like tags are focused
Modifiers
List
You can apply the list
-class to cover the container with a narrower card
Specs
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.
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.
Specs
- Blog post
Marit brakk ryggen på Bali
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
The .if.cards.articles
-container has a margin bottom to push down the content
Breakpoint | Bottom margin |
---|---|
default | 24px |
400px | 32px |
720px | 40px |
Anatomy
- Blog post
Marit brakk ryggen på Bali
Den etterlengtede ferien ble til et mareritt da Marit Holm falt og skadet seg ved bassengkanten.
- Category
- Title
- Preview
- Tags
- Author
- Date and SoMe interactions (optional)
- Image
- Blog post
Se videoen: Klippet over seks vaierlåser på 30 sekunder
Hvor godt bekytter vaierlåser egentlig mot sykkeltyveri? Ikke så veldig, viser dette eksperimentet. Sjekk videoen!
- The fill color is BE 5, LIGHTEST BEIGE
- The text color is LB 1, LIGHT BROWN
- The text color is BR 1, BROWN
- The text color is BR 1, BROWN
- The text color is LB 1, LIGHT BROWN
- The text color is LB 1, LIGHT BROWN