Disclaimer

Disclaimers display legal copy, liability information, and footnotes. They use the micro typography class with text-secondary color for reduced visual prominence.

Images and photographs on this website are for general guidance only and do not necessarily reflect the exact specifications or features of the model concerned.

<p class="micro text-secondary container-md">
  Images and photographs on this website are for general guidance only and do
  not necessarily reflect the exact specifications or features of the model
  concerned.
</p>

Structure

A disclaimer is built with utility classes:

• micro — 12px font size for legal text
• text-secondary — secondary text color for reduced emphasis
• container-md — max-width constraint (808px)

<p class="micro text-secondary container-md">Legal disclaimer text here.</p>

Text alignment

Text should always be left-aligned on mobile. On tablet and desktop, text can be centered using md:text-center:

Auto sm md lg xl

volvocars.com

<p class="micro text-secondary container-md md:text-center">
  Images and photographs on this website are for general guidance only and do
  not necessarily reflect the exact specifications or features of the model
  concerned.
</p>

Variants

Standalone

Used at the bottom of a page, separated from content with standard page spacing.

Images and photographs on this website are for general guidance only and do not necessarily reflect the exact specifications or features of the model concerned.

<p class="micro text-secondary container-md">
  Images and photographs on this website are for general guidance only and do
  not necessarily reflect the exact specifications or features of the model
  concerned.
</p>

Inline

Used within a component for callouts. Use * or numbered footnotes to connect specific text with its disclaimer:

From £XX,XXX*

*Price shown is recommended retail price including VAT.

<div class="stack-8">
  <p class="font-medium">From £XX,XXX*</p>
  <p class="micro text-secondary">
    *Price shown is recommended retail price including VAT.
  </p>
</div>

Popup

For longer disclaimers, use an info icon that opens a dialog. Use primary text color (not secondary) inside the dialog, and standard 16px body copy instead of micro.

See the Dialog component for implementation.

Footnote markers

Use markers to connect specific content with its disclaimer:

Markers	Use case
* or **	1-2 disclaimers
¹, ², ³	More than 2 disclaimers

Placement rules:

• After content text: From £XX,XXX*
• Before disclaimer text: *Price shown is...

Spacing

Variant	Spacing
Embedded	Fixed 48px above
Inline	Component spacing (same as other elements)
Standalone	Page spacing (64px mobile, 80px tablet, 96px desktop)

Accessibility

• Disclaimers are standard text content—no special ARIA roles needed
• For popup disclaimers, use role="dialog" with proper focus management
• Maintain 4.5:1 contrast ratio for all text