Skip to content

7 Seventh UI CSS

Components

Version

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>