- Taxonomic name: M-CARD-KEYLINE
- Added on: v4.5.0 (07/12/18)
- Updated on: v5.7.0 (18/05/21)
Keyline cards
Card keylines are an restricted aesthetic inclusion to offer theming distinction for Connect, Pensions and AvivaPlus.
Design and usage
Structure
- 4px keyline positioned across the top of a card
- Keyline can only be added to cards with these background colours:
- White #FFF
- Lightest Blue #E5EDF8
- Lightest Grey #F9F9F9
- Light Grey #EEE
- Cards that can add the optional keyline are:
- Image cards
- Icon cards
- Download cards
- Tertiary cards
- Review cards
- Numeric cards
- PROHIBITED: On block colour cards. For example, block colour FW variations existing in Story deck, video cards, promo cards, report cards
- If a card in a row uses a keyline, all cards in that row must do so (Colour of keyline can vary for each card)
Use case and exception scenarios
- Only for use with Connect, Pensions and AvivaPlus themes
Design anatomy
- 4px height
- Sits within card container
- Spans full card width
- Card height increases by 4px
- Keyline can be any accent colour
Examples
Interactive example
Code example
Cards using individual card keylines
<li class="m-card m-card--[ Modifier ] m-card-keyline m-card-keyline--[ Modifier ]">
<div class="m-card-content">
...
</div>
</li>Cards using a group card keyline
<li class="m-card-keyline m-card-keyline--[ Modifier ]">
<div class="m-card m-card--[ Modifier ]">
<div class="m-card-content">
...
</div>
</div>
</li>Development and test
Notes for developers
.m-card-keyline and it's .m-card-keyline--[ Modifier ] colour option can be used to style a group of cards when placed on the column wrapper.l-columns, or individual cards when used on the card wrapper.m-card
Ensure .m-card-keyline and it's .m-card-keyline--[ Modifier ] colour option has been specified for the card/s to guarantee the correct keyline colour within the card/s.
Psuedo elements have been used to establish a clean keyline in modern browsers, especially where other border classes have been used on the card, i.e tertiary cards.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Note: The colour mapping below is for the Abeille Assurances default theme. The colours for the other managed themes will match the accent colours used for those themes.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-card |
Base style for card | Yes | .l-columns-column |
|
.m-card-keyline |
Base style for card keyline | Yes | .l-section or .l-columns for group applicationor .m-card for single application |
Use for group card styling or individual card styling, never both |
.m-card-keyline--accent-light-1 |
Variant to make keyline white | .m-card-keyline |
||
.m-card-keyline--accent-light-2 |
Variant to make keyline lightest grey | .m-card-keyline |
||
.m-card-keyline--accent-light-3 |
Variant to make keyline light grey | .m-card-keyline |
||
.m-card-keyline--accent-light-5 |
Variant to make keyline yellow | .m-card-keyline |
||
.m-card-keyline--accent-light-4 |
Variant to make keyline lightest blue | .m-card-keyline |
||
.m-card-keyline--accent-dark-1.m-card-keyline--accent-dark-2
|
Variant to make keyline Abeille Assurances Blue | .m-card-keyline |
||
.m-card-keyline--accent-dark-3 |
Variant to make keyline Bottle Green | .m-card-keyline |
||
.m-card-keyline--accent-dark-4 |
Variant to make keyline Warm Grey | .m-card-keyline |
||
.m-card-keyline--accent-dark-5.m-card-keyline--accent-dark-6
|
Variant to make keyline Plum | .m-card-keyline |
||
.m-card-keyline--accent-dark-7 |
Variant to make keyline Dark Teal | .m-card-keyline |
||
.m-card-keyline--accent-dark-8 |
Variant to make keyline Dark Grey | .m-card-keyline |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the social link clearly visually different so that the focus point on the page is obvious to the user
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the relevant page.