Relationship With Layout

Patterns often compose with layout primitives.

...

<menu class="actions cluster">...</menu>
<ul class="nav-list cluster">...</ul>
<ul class="nav-list stack">...</ul>
<section class="grid">...</section>

Avoid putting semantic resets into layout primitives.

CSS

/* Avoid */
.stack {
  padding: 0;
  list-style: none;
}

.stack should remain useful for real content lists where markers are expected.

First important point
Second important point
Third important point

<ul class="stack">
  <li>First important point</li>
  <li>Second important point</li>
  <li>Third important point</li>
</ul>

If list chrome should be removed, use an explicit pattern.

Docs
Components

<ul class="nav-list stack">
  <li><a href="/docs">Docs</a></li>
  <li><a href="/components">Components</a></li>
</ul>