Style Guide Components

Components

Diagrams

The .phase-blocks component displays a set of visually grouped blocks, ideal for illustrating steps, phases, or categories in a process.

Example

Discover

Initial research and exploration phase.

Design

Ideation, prototyping, and visual design.

Deliver

Implementation and launch of the solution.

Usage

<div class="phase-blocks green solid">
  <a class="phase-block" href="#">
    <h2>Discover</h2>
    <p>Initial research and exploration phase.</p>
  </a>
  <a class="phase-block" href="#">
    <h2>Design</h2>
    <p>Ideation, prototyping, and visual design.</p>
  </a>
  <a class="phase-block" href="#">
    <h2>Deliver</h2>
    <p>Implementation and launch of the solution.</p>
  </a>
</div>

Variants

Modifier Classes	Effect
`.green` / `.blue`	Sets the color theme
`.solid`	Solid background blocks
`.outlined`	Outlined blocks with colored headers

Responsive Behaviour

Blocks display in a row on desktop, and stack vertically on screens ≤768px.
Each block is flexible and adapts to available space.

Customisation

Add or remove blocks as needed.
Use different color and style modifiers for visual distinction.
Each block can contain a heading, text, and a link.

Accessibility

Use clear, descriptive headings for each phase.
Ensure sufficient color contrast for text and backgrounds.

Tables

Tables are used to display tabular data in a clear, accessible, and responsive way.

Example Table

Feature	Supported	Notes
Responsive layout	✔️	Collapses to mobile-friendly blocks
Column centering	✔️	Use `.centre-ticks` on table
Custom cell labels	✔️	Set `data-label` on `<td>` for mobile

Usage

<table class="responsive-table centre-ticks">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Header 1">Cell 1</td>
      <td data-label="Header 2">Cell 2</td>
    </tr>
  </tbody>
</table>

Variants

Striped rows
Centered ticks

Responsive Behaviour

Mobile stacking rules
Horizontal scroll on narrow viewports