Skip to content

Components

Every class the stylesheet defines, grouped by the part file that defines it. A modifier (--sm) and an element (__body) are listed under the block they belong to.

Anything not on this page does not exist, and abilian-ds lint says so.

State

Set from script or from the server, never as a resting style. Current is aria-current, not a class — see notes/21.

  • .dragging
  • .drop-target
  • .is-active
  • .is-done
  • .is-dragging
  • .is-on
  • .is-open
  • .is-over
  • .is-selected

alert.css

  • .ads-alert __desc __heading

button.css

  • .ads-btn --danger --ghost --pill --primary --sm
  • .ads-btn-group

card.css

  • .ads-card --lg --sm --status --status-danger --status-success --status-warning __body __foot __head __subtitle __title
  • .ads-metric
  • .ads-ribbon

content.css

  • .ads-accordion
  • .ads-calendar __date __day __day--outside __day--today __event __head
  • .ads-checklist
  • .ads-composer
  • .ads-datagrid __title
  • .ads-divide
  • .ads-empty __header __icon __subtitle __title
  • .ads-frame
  • .ads-list --plain
  • .ads-log
  • .ads-message --divider --mine __author __body __bubble __date __title
  • .ads-price
  • .ads-prose
  • .ads-rule
  • .ads-steplist __mark __title
  • .ads-subheader
  • .ads-thread
  • .ads-timeline __event __icon
  • .ads-tip
  • .ads-tree --nested __label __node

forced-colors.css

  • .ads-check

form.css

  • .ads-choice __note
  • .ads-color
  • .ads-combobox __empty __list __option
  • .ads-dropzone
  • .ads-editor
  • .ads-error
  • .ads-field
  • .ads-file __icon __meta __name
  • .ads-file-input
  • .ads-help
  • .ads-input
  • .ads-input-icon __addon
  • .ads-label --required
  • .ads-otp
  • .ads-range
  • .ads-select
  • .ads-strength
  • .ads-switch __track
  • .ads-textarea

indicator.css

  • .ads-avatar --lg --sm --xs
  • .ads-avatars --stacked
  • .ads-badge
  • .ads-chip __x
  • .ads-chips --input
  • .ads-flag
  • .ads-kbd
  • .ads-legend __swatch __value
  • .ads-placeholder
  • .ads-progress --indeterminate __bar
  • .ads-rating --readonly
  • .ads-skeleton
  • .ads-sparkline
  • .ads-spinner --sm
  • .ads-status --danger --success __dot
  • .ads-tone-brand
  • .ads-tone-danger
  • .ads-tone-info
  • .ads-tone-neutral
  • .ads-tone-success
  • .ads-tone-warning
  • .ads-uptime

layout.css

  • .ads-board __card __col __grip __title
  • .ads-center
  • .ads-centered __inner
  • .ads-cluster
  • .ads-col-lg
  • .ads-col-sm
  • .ads-end
  • .ads-fill
  • .ads-full
  • .ads-gap-lg
  • .ads-gap-sm
  • .ads-grid
  • .ads-muted
  • .ads-push
  • .ads-skip
  • .ads-split
  • .ads-spread
  • .ads-stack
  • .ads-toned
  • .ads-truncate
  • .ads-with-aside
  • .ads-breadcrumb
  • .ads-page-link
  • .ads-pagination
  • .ads-pill
  • .ads-pills
  • .ads-segmented --sm __item
  • .ads-step
  • .ads-steps
  • .ads-subnav
  • .ads-tab
  • .ads-tabpanel
  • .ads-tabs
  • .ads-topbar

overlay.css

  • .ads-backdrop
  • .ads-close
  • .ads-cookies __actions
  • .ads-drawer __body __foot __head __title
  • .ads-dropdown
  • .ads-lightbox __body __head
  • .ads-menu __item __item--danger __sep
  • .ads-modal __body __foot __head __panel __title
  • .ads-popover __panel __title
  • .ads-toast __body __head
  • .ads-toasts
  • .ads-tour __actions __step __title
  • .ads-tour-target

shell.css

  • .ads-app --folded --horizontal --right
  • .ads-brand __mark
  • .ads-container --fluid --narrow
  • .ads-main
  • .ads-nav __group __icon __link __list __section __sub
  • .ads-page-body
  • .ads-page-header
  • .ads-page-title
  • .ads-pretitle
  • .ads-sidebar __inner

table.css

  • .ads-datatable __bulk __idle
  • .ads-table --compact --hover --selectable --sticky --striped --vcenter __select
  • .ads-table-scroll
  • .ads-th-sort

base.css

  • .ads-icon
  • .ads-no-print