Taxonomic name: M-CARD--TITLE-SECTION
Added on: v4.8.0 (29/03/19)
Updated on: v5.6.0 (20/04/21)

Title section cards

Design and usage

Keyline variant

Structure

The keyline for the optional title section will always be displayed below any headline
Cards that can add the optional title section keyline are:
- Tertiary cards
- Image cards
- Promo cards
- Icon cards
- Video cards
- Numeric cards
If a card in a row uses a keyline, all cards in that row must do
Only cards with additional body copy can use the optional title section

Placement

1px keyline positioned below the heading of a card

Design anatomy

1px height #CCC
15px top and bottom padding between optional title section
Sits within card container
Spans full card width, minus card's internal padding

Background colour variant

Structure

Background title sections are only available for text-based cards. These are:
- Tertiary cards
- Download cards
- Review cards
If a card uses a background colour in its title, all related cards in the section must also use this same colour for consistency
Do not use different colours in a section
Do not combine with keyline
Can only be used with white card with border (Tertiary class)
Can only be used against a white background

Placement

Background colour can only be used over the heading area
Date tag is optional

Design anatomy

15px top and bottom padding between title area
Sits within card container
Spans full card width, minus cards internal padding
Can only use colours that are at least AA WCAG compliant
All dark accent colours can be used

Examples

Card with individual title keyline applied

Interactive example

Code example

<li class="m-card [ Modifier ]">
	<div class="m-card-image [ Modifier ]" data-module="u-objectfit">
		<picture>
			<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
			...
			<source type="image/webp" srcset="..." width="..." height="..." />
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
	</div>
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<div class="m-card-content-title-section">
				<p class="m-card-tagline">...</p>
				<h2 class="a-heading [ Modifier ]">...</h2>
			</div>
			<p>...</p>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<button class="a-button [ Modifier ]"><span class="a-button__inner">...</span></button>
		</div>
	</div>
</li>

Cards with group title keyline

Interactive example

Code example

<li class="t-card-title-section-keyline [ Modifier ]">
	<div class="m-card [ Modifier ]">
		<div class="m-card-image [ Modifier ]">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
		</div>
		<div class="m-card-content">
			<div class="m-card-content__inner">
				<div class="m-card-content-title-section">
					<h2 class="a-heading [ Modifier ]">...</h2>
				</div>
				<p>...</p>
			<div class="m-card-content__inner m-card-content__inner--bottom">
			</div>
				<button class="a-button [ Modifier ]"><span class="a-button__inner">...<span class="u-hidden--visually">...</span></span></button>
			</div>
		</div>
	</div>
	...
</li>

Cards with group title background colour

Interactive example

Code example

<ul class="a-list-plain t-card-title-section-dark [ Modifier ]">
	<li class="l-columns__column m-card [ Modifier ]">
		<div class="m-card-content">
			<div class="m-card-content__inner">
				<div class="m-card-content-title-section">
					<p class="m-card-tagline">...</p>
					<h2 class="a-heading [ Modifier ]">...</h2>
				</div>
				<p>...</p>
			</div>
			<div class="m-card-content__inner">
				<button class="a-button [ Modifier ]"><span class="a-button__inner">...</span></button>
			</div>
		</div>
	</li>
	...
</ul>

Cards with height equalized titles

Interactive example

Code example

<ul class="a-list-plain t-card-title-section-dark [ Modifier ]" data-module="m-card-titles">
	<li class="l-columns__column m-card [ Modifier ]">
		<div class="m-card-content">
			<div class="m-card-content__inner">
				<div class="m-card-content-title-section">
					<p class="m-card-tagline">...</p>
					<h2 class="a-heading [ Modifier ]">...</h2>
				</div>
				<p>...</p>
			</div>
			<div class="m-card-content__inner">
				<button class="a-button [ Modifier ]"><span class="a-button__inner">...</span></button>
			</div>
		</div>
	</li>
	...
</ul>

Development and test

Notes for developers

.t-card-title-section-keyline and .t-card-title-section-dark together with its .t-card-title-section-dark--[ 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 .t-card-title-section-dark and its .t-card-title-section-dark--[ Modifier ] colour option has been specified for the card/s to guarantee the correct title background colour within the card/s.

Use the new title content wrapper class .m-card-content-title-section inside the card content upper area .m-card-content__inner.

<div class="m-card-content">
	<div class="m-card-content-title-section">
		...
	</div>
	...
</div>

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
`.m-card`	Base style for card	Yes	`.l-columns-column`
`.m-card-content-title-section`	Wrapper for all card title content	Yes	`m-card-content > div`
`.t-card-title-section-keyline`	Optional card title keyline styling	Yes Only for keyline use	`.l-section` or `.l-columns` for group application or `.m-card` for single application
`.t-card-title-section-dark`	Optional card title background colour styling	Yes Only for background colour use	`.l-section` or `.l-columns` for group application or `.m-card` for single application
`.t-card-title-section-dark--accent-dark-1` `.t-card-title-section-dark--2`	Modifier style card title background colour (Abeille Assurances blue)		`.t-card-title-section-dark`
`.t-card-title-section-dark--3`	Modifier style card title background colour (Bottle green)		`.t-card-title-section-dark`
`.t-card-title-section-dark--4`	Modifier style card title background colour (Warm grey)		`.t-card-title-section-dark`
`.t-card-title-section-dark--5` `.t-card-title-section-dark--6`	Modifier style card title background colour (Plum)		`.t-card-title-section-dark`
`.t-card-title-section-dark--accent-dark-7`	Modifier style card title background colour (Dark teal)		`.t-card-title-section-dark`
`.t-card-title-section-dark--accent-dark-8`	Modifier style card title background colour (Dark grey)		`.t-card-title-section-dark`

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.

Component releases

Added on: v4.8.0 (29/03/19)
Updated on: v5.6.0 (20/04/21)

Latest update:

updated: To improve page load and layout times the additional attributes decoding="async", width and height must be set on all inline images.
updated: Markup has changed to use the picture element to improve page performance by allowing different sized images to be served for different screen sizes.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team