Skip to main content

Surfaces

Container styles for grouping related content with visual hierarchy.

Default surface

Surface

Default surface component with a subtle background and padding. 

<div class="l-ui-surface">
  <h3>Title</h3>
  <p>Content goes here</p>
</div>

Highlighted surface

Surface highlighted

A highlighted variant for emphasised content sections. 

<div class="l-ui-surface l-ui-surface--highlighted">
  <h3>Title</h3>
  <p>Content goes here</p>
</div>

Collapsible surface

Collapsible heading

This content can be toggled open and closed. Uses native HTML disclosure for full keyboard and screen reader support. 

<details class="l-ui-surface l-ui-surface--collapsible">
  <summary class="l-ui-surface__summary">
    <span>Heading text</span>
    <img src="layered_ui/icon_chevron_right.svg" alt="" class="l-ui-icon l-ui-icon--sm l-ui-surface__chevron" aria-hidden="true">
  </summary>
  <div class="l-ui-surface__content">
    <p>Content goes here</p>
  </div>
</details>

Collapsible highlighted surface

Collapsible highlighted heading

Highlighted variant of the collapsible surface for emphasised sections. 

<details class="l-ui-surface l-ui-surface--collapsible-highlighted">
  <summary class="l-ui-surface__summary">
    <span>Heading text</span>
    <img src="layered_ui/icon_chevron_right.svg" alt="" class="l-ui-icon l-ui-icon--sm l-ui-surface__chevron" aria-hidden="true">
  </summary>
  <div class="l-ui-surface__content">
    <p>Content goes here</p>
  </div>
</details>

Small surface

Small collapsible heading

Smaller surface variant with compact padding for nested contexts. 

<details class="l-ui-surface l-ui-surface--collapsible l-ui-surface--sm">
  <summary class="l-ui-surface__summary">
    <span>Heading text</span>
    <img src="layered_ui/icon_chevron_right.svg" alt="" class="l-ui-icon l-ui-icon--sm l-ui-surface__chevron" aria-hidden="true">
  </summary>
  <div class="l-ui-surface__content">
    <p>Content goes here</p>
  </div>
</details>

Small highlighted surface

Small highlighted collapsible heading

Combines the highlighted color variant with compact sizing. 

<details class="l-ui-surface l-ui-surface--collapsible-highlighted l-ui-surface--sm">
  <summary class="l-ui-surface__summary">
    <span>Heading text</span>
    <img src="layered_ui/icon_chevron_right.svg" alt="" class="l-ui-icon l-ui-icon--sm l-ui-surface__chevron" aria-hidden="true">
  </summary>
  <div class="l-ui-surface__content">
    <p>Content goes here</p>
  </div>
</details>

Code block

def greet(name)
  "Hello, #{name}!"
end
<pre class="l-ui-surface"><code>def greet(name)
  "Hello, #{name}!"
end</code></pre>

CSS classes

Surface CSS classes
Class Description
l-ui-surface Default surface with background
l-ui-surface--highlighted Highlighted state
l-ui-surface--collapsible Collapsible surface with disclosure toggle (use on <details>)
l-ui-surface--collapsible-highlighted Visual color variant of collapsible surface (uses bg-surface-highlighted), not an open-state modifier
l-ui-surface__summary Summary/heading row inside a collapsible surface
l-ui-surface--sm Compact variant with smaller padding and summary text
l-ui-surface__chevron Disclosure chevron icon that rotates when open
l-ui-surface__content Content area inside a collapsible surface
pre.l-ui-surface Preformatted code block