Taxonomic name: M-CARD--GALLERY
Extension: LONG-FORM-ARTICLE
Current owner: Framework
Added on: v5.2.0 (17/11/20)
Updated on: v5.6.0 (20/04/21)

Image gallery card

The image gallery carousel adds a layer of interaction and delight to the predominantly static long form article page, and can be placed anywhere within an article chapter. When selecting and implementing images, be sure to follow the Abeille Assurances brand photography guidelines to ensure that visual standards are adhered to.

Design and usage

Structure

Copy within each card is limited to 150 characters including spaces; this can only be plain text, simple quotes and basic text links
When there is a group of gallery cards, they appear within a card carousel displaying a single card at all screen sizes

Accessibility and screen readers

Image/text contrast inline with pre-existing WCAG guidelines and established Framework components

Non-js requirements and considerations

All gallery cards appear stacked

Placement

Anywhere within a long form article chapter, spanning the full width of the grid

Use case and exception scenarios

This card type is designed exclusively for the long-form article template page

Design anatomy

The cards can have either of the following colour combinations:
- Base grey (#eee) foreground with dark grey (#444) background
- Any dark accent foreground with base grey (#eee) background
Cards span all columns at all screen sizes
Image aspect ratio remains 16:9 at all screen sizes
Desktop
- Image spans 7.5 columns fixed to left
- Background container spans 4.5 columns, matching same height as image, fixed to the right
- Foreground container spans 4.5 columns inset from the top (75px) and right (70px) of the card, overlapping the image. The bottom of the container aligns with the bottom of the card
- Copy is 20px bold
Tablet
- Image spans 5 columns fixed to left
- Background container spans 3 columns, matching same height as image, fixed to the right
- Foreground container spans 3 columns inset from the top (40px) and right (40px) of the card, overlapping the image. The bottom of the container aligns with the bottom of the card
- Copy is 16px bold
Mobile
- Image stacks above the foreground container with the background container not being visible
- Height of foreground container determined by the copy length
- Copy is 16px bold

Examples

Gallery card

Interactive example

Code example

<div class="m-card m-card--gallery">
	<div class="m-card-image" 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>
</div>

Gallery card within a carousel

Development and test

Notes for developers

When placing within a carousel, ensure that the data-slides attribute on the carousel is set to [1,1,1] (one card to view at each of mobile, tablet and desktop):

<div class="l-columns o-carousel o-carousel--all" data-module="o-carousel" data-slides="[1,1,1]">
	<div class="l-columns__column m-card m-card--gallery">
		...
	</div>
	...
</div>

Card content

The only permitted content types within the m-card-content are:

Paragraph <p>...</p>
Simple quote <p><q>...</q></p>
Inline text links

Extension component

This component forms part of the 'long-form-article' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/long-form-article.css" rel="stylesheet" />

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.m-card--gallery`	Modifier to adjust styles for the gallery card	Yes	`.m-card`

Component releases

Added on: v5.2.0 (17/11/20)
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