Link grid

<ul class="cc-linkgrid">
  <li><a href="#">Pay property taxes</a></li>
  <li><a href="#">License your dog</a></li>
  <li><a href="#">Request a vital record</a></li>
  <li><a href="#">Apply for a mooring</a></li>
  <li><a href="#">Report a problem</a></li>
  <li><a href="#">Explore all services</a></li>
</ul>

<ul class="cc-linkgrid">
  <li><a href="#">Pay property taxes <span class="cc-meta">Leaves this site — invoicecloud.net</span></a></li>
  <li><a href="#">License your dog <span class="cc-meta">Renewals open January 1</span></a></li>
</ul>

When to use it

• Destination notes sit below the title. Keep the note in .cc-meta inside the link so both read in order and share one target.
• For a list whose items are places to go. A list of statements stays a list — use .cc-list.
• Six to twelve items is where it earns its space. Two or three look stranded; twenty want a page of their own.

Accessibility

• It is a real list of real links, so it is announced as a list of that many items and every item is in the tab order.
• The whole card is the link, so the target is the full tile rather than the text — comfortably past 44px (2.5.5).
• The chevron is a CSS pseudo-element with no text, so nothing is announced twice; the link text carries the entire meaning (1.1.1).
• Hover and focus both change more than colour — the label underlines and the ring is visible (1.4.1).
• Link text has to make sense read on its own: "Pay property taxes", never "Click here" (2.4.9).