Skip to main content Curbcut by Baseline
Menu
All components

List

Ordered, unordered and unstyled lists with readable spacing.

  • Proof of a current rabies vaccination
  • Proof of spay or neuter, if applicable
  1. Fill in the application
  2. Pay the fee
  • Assessor
  • Town Clerk
Show the markup 
<ul class="cc-list">
  <li>Proof of a current rabies vaccination</li>
  <li>Proof of spay or neuter, if applicable</li>
</ul>
<ol class="cc-list">
  <li>Fill in the application</li>
  <li>Pay the fee</li>
</ol>
<ul class="cc-list cc-list--unstyled" role="list">
  <li>Assessor</li>
  <li>Town Clerk</li>
</ul>
<ul class="cc-list cc-list--rows" role="list">
  <li><strong><a class="cc-link" href="#">Fall bulk pickup schedule</a></strong><br><span class="cc-meta">Department of Public Works · Oct 4</span></li>
  <li><strong><a class="cc-link" href="#">Water main flushing begins</a></strong><br><span class="cc-meta">Water Division · Oct 11</span></li>
</ul>

Accessibility

  • Use real ul/ol semantics — screen readers announce list length and position.
  • cc-list--unstyled removes markers, which makes Safari/VoiceOver drop list semantics — add role="list" to keep the length and position announcements, as the example does.