Slots

Many components in the design system use a slot-based layout. Instead of requiring utility classes on every child element, you add a slot attribute to direct children and the component handles styling, spacing, and responsive behavior for you.

<section class="media-hero">
  <h1 slot="title">The pure electric EX90</h1>
  <p slot="body">Our flagship SUV.</p>
  <div slot="action" class="button-group">…</div>
  <img slot="media" src="hero.avif" alt="" />
</section>

Why slots?

1. Automatic styling - You write semantic HTML; the design system handles typography, spacing, and layout.
2. Future-proof - When the design system updates, your components update automatically. Just bump @volvo-cars/css.
3. Consistency - Teams produce consistent UIs without memorizing utility-class recipes.
4. Simplicity - No wrapper divs, no class chains. One slot attribute communicates intent.

How they work

Add a slot="name" attribute to a direct child of the component’s root element. The component recognizes the slot name and applies the appropriate styles.

• Slots must be direct children of the component root.
• Each slot name can appear once per component instance.
• Keep slot order logical for reading order and accessibility; some components reposition slots visually at certain breakpoints.
• Unrecognized slot names are ignored.

Each component documents its own available slots. The page layout also uses slots (page, main, sidebar) to define structural regions of a page.

Overriding slot defaults

Slots provide sensible defaults, but you can override them with utility classes when needed:

<!-- Override the default aspect ratio on the media slot -->
<img slot="media" class="aspect-16/9" src="hero.avif" alt="" />

Utility classes are loaded after component styles in the cascade, so they override slot defaults when needed.