List row
The whole row is the link. On hover the row fills with the blue tint, the title underline goes to 2px, and the arrow moves 4px to the right. Pressed uses a deeper tint. The focus ring wraps the row. Rows have an arrow and no button, so they need that clear hover state.
View HTML
<section class="cs-more" aria-labelledby="more-demo-h">
<h3 class="cs-more__heading type-subhead" id="more-demo-h">More work</h3>
<ul class="cs-more__list" role="list">
<li>
<a class="cs-row-link" href="#">
<span class="cs-row-link__text">
<span class="cs-row-link__title type-h3">Case study title</span>
<span class="cs-row-link__category type-label">Category</span>
</span>
<span class="cs-row-link__arrow" aria-hidden="true">
<!-- icon: arrow_forward -->
</span>
</a>
</li>
<li>
<a class="cs-row-link" href="#">
<span class="cs-row-link__text">
<span class="cs-row-link__title type-h3">Another case study title</span>
<span class="cs-row-link__category type-label">Category</span>
</span>
<span class="cs-row-link__arrow" aria-hidden="true">
<!-- icon: arrow_forward -->
</span>
</a>
</li>
</ul>
</section>Tablet
From 768 to 1023px the row sits on the 8-column grid with 16px gutters and is 736px wide with its 16px side padding. The title takes columns 1 to 4, the category columns 5 and 6, and the arrow cell columns 7 and 8, right-aligned. An unlocked row is 104px tall. The frame below is 768px wide, so it shows the tablet layout on any screen.
In a locked row the lock takes the arrow's place and the helper line sits under it in columns 7 and 8, where it wraps to two lines. The title and category are centered against both, and the row is 144px tall.
Using the list row
Do
- Use it on the page surface, with a rule between rows.
- Hide the arrow from screen readers (
aria-hidden); the title is the link name.
Don't
- Put a row inside a tinted section. The hover tint would disappear.
- Add a button to the row. The row is the target.
Up next
Link card
One card that is one link, with a title, a line of text and a button look.