Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

List

Plain CSS implementation of the Figma List section, node 930:4101.

Line Conditions

  • List item
  • List item Supporting line text lorem ipsum dolor sit amet
  • List item Supporting line text lorem ipsum dolor sit amet, consectetur adipiscing elit.

Leading And Trailing

  • A Monogram
  • Icon leading
  • Trailing meta Supporting line text lorem ipsum 100+

Trailing Controls

  • Checkbox
  • Radio
  • Switch

Checkbox, radio, and switch use native component APIs for form participation and keyboard behavior.

Density

  • Default
  • Default
  • Default
  • -2 Density
  • -2 Density
  • -2 Density
  • -4 Density
  • -4 Density
  • -4 Density

States

  • Hover
  • Focus
  • Pressed

CSS API

Use semantic list markup when the items are static. Use button.sui-list-item or a.sui-list-item only when the whole item is interactive.

<ul class="sui-list"> <li class="sui-list-item sui-list-item--two-line"> <span class="sui-list-item__content"> <span class="sui-list-item__headline">List item</span> <span class="sui-list-item__support">Supporting line text</span> </span> </li> </ul>