> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-gov/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-gov/patterns.md).

# Patterns

## Image Cards section

Three cards with images displayed in a section with heading and introduction. Used for important information.

**Components:** Section (thirds), 3 images cards

## Icon Cards section

Four cards with icons displayed in a section with heading and introduction. Used for important tasks.

**Components:** Section (quarters), 4 icon cards

## Background and overlay section

Section demonstrating accessible background.

**Components:** Section (100), Content, Image Background Modifier

## Palette and texture section

Section demonstrating a colour option with texture variant.

**Components:** Section (100), Content

## Offset header section

Section demonstrating one of the header variants with it on the side.

**Components:** Section (6-6), Content

## Stats section

Statistics with animations displayed in a section. Used for conveying important, convincing, numerical data for key insights.

**Components:** Section (thirds), 3 stats

## Accordion section

Collapsible accordions convey important information in a compact way. Used for checklists of data which require further explanation.

**Components:** Section (100), Accordion group and 4 accordions

## Logo cloud section

List of logos of organisions. Used to showcase affilations and to validate the offerings of the website.

**Components:** Section (3-1-8), Logo cloud\*

## Slider section

Powerful slider section showcasings a list of items presenting key information.

**Components:** Section (100), Slider\*

## Hero

Simple hero with heading content and call to action link. Used for clear messaging.

**Components:** Hero, cp:Primary

## Hero with background

Attractive hero with background image, heading content and call to action link. Used eye catching display at top of landing pages.

**Components:** Hero, cp:Primary

## Hero with parallax

Compelling hero with parallax background images, heading content and call to action link. Used for playful and attractive content.

**Components:** Hero, cp:Primary

## Hero with video

Visual and arresting hero with background video, heading content and call to action link. Used for capturing the user's imagination and attention.

**Components:** Hero, cp:Primary