Skip to main content
PimentCSS v1.0.1, what's new

Home

Lists

Stacked list rows with indicators and optional actions.

Styles live in scss/components/_list.scss. Use a semantic <ol class="list__items"> for ordered steps, or <ul> when order does not matter. Decorative indicators sit beside title and description blocks.

Indicators

Each row starts with a 24px circle: a process step number or an icon marker. Mark indicators aria-hidden="true" when the list order already conveys sequence.

Process (step number)
Icon

Single item

Combine .list__item, .list__indicator, and .list__content for one row outside a full list (cards, timelines, side panels).

Verify your email

We sent a confirmation link. Open it to continue.

Full list (process steps)

Wrap items in .list with an optional .list__heading. Use <h3 class="list__title"> per row so heading levels stay logical under the section title.

Onboarding steps

  1. Create your account

    Use a work email so teammates can find you.

  2. Verify your email

    Check your inbox for the confirmation link.

  3. Invite your team

    Add colleagues and assign roles.

  4. Publish your first project

    Share a link or export your layout.

Icon indicators

Swap the number for an icon in .list__indicator-icon (for example <i class="ph ph-bookmark"> at 16px inside the 24px circle).

Saved resources

  1. Design tokens

    Color, type, and spacing variables for your product.

  2. Component checklist

    Accessibility and responsive checks before release.

  3. Release notes

    What changed in the latest PimentCSS build.

Class reference

ClassDescription
.listVertical stack: optional heading + items
.list__headingSection title above the items
.list__itemsol or ul reset list (no bullets)
.list__itemRow: indicator + content
.list__indicator24px circular marker (number or icon)
.list__indicator-iconIcon size inside the marker
.list__contentTitle + description column
.list__titleRow heading (H6 scale)
.list__descriptionSupporting body text

Customize (Sass)

  1. List spacing

    Tune gaps between items and indicator size. 
    @use "pimentcss-design-system" with (
  $list-gap: 1rem,
  $list-items-gap: 0.5rem,
  $list-indicator-size: 1.5rem
);

  2. Rebuild CSS

    Run after editing _list.scss. 
    npm run build:css

Accessibility (RGAA / WCAG)

Lists and steps

  • Ordered steps, use <ol class="list__items"> so screen readers announce position.
  • Unordered content, use <ul class="list__items"> when sequence is not meaningful.
  • Decorative indicators, add aria-hidden="true" on .list__indicator when numbers duplicate what the list order already provides.
  • Headings, keep one logical level: section .list__heading, then <h3 class="list__title"> per item.
  • Icons, if the icon conveys meaning (not just decoration), expose that text in the title or use visible text plus aria-hidden on the icon.

Next steps

Tables

Tabular data when you need columns.

Tree

Hierarchical navigation and folders.

Badges

Compact status labels.

In-page anchors

Jump between sections on long pages.