DÁP Design System - List item webcomponent

List item

List item component is a simple list item that can be used to make a checklist or a list of items.

Examples

Variants

Variants can be set to info, pass, fail, notapplicable, empty, number. It changes the icon of the list item. These are the built in variants, any other custom icon can be used. Number variant is special, it can be used to show a number in the list item with the number attribute.

<dap-ds-stack>
  <dap-ds-list-item noicon>Empty</dap-ds-list-item>
  <dap-ds-list-item variant="info">Variant: Info</dap-ds-list-item>
  <dap-ds-list-item variant="pass">Variant: pass</dap-ds-list-item>
  <dap-ds-list-item variant="fail">Variant: fail</dap-ds-list-item>
  <dap-ds-list-item variant="notapplicable">Variant: notapplicable</dap-ds-list-item>
  <dap-ds-list-item variant="empty">Variant: empty</dap-ds-list-item>
  <dap-ds-list-item variant="number" number="5">Variant: number</dap-ds-list-item>
  <dap-ds-list-item interactive noicon>Interactive, no icon</dap-ds-list-item>
</dap-ds-stack>

Status

Status can be set to neutral, brand, positive, negative. It basically changes the color of the list item icon.

<dap-ds-stack>
  <dap-ds-list-item variant="info" status="neutral">Status: neutral</dap-ds-list-item>
  <dap-ds-list-item variant="pass" status="brand">Status: brand</dap-ds-list-item>
  <dap-ds-list-item variant="fail" status="positive">Status: positive</dap-ds-list-item>
  <dap-ds-list-item variant="notapplicable" status="negative">Status: negative</dap-ds-list-item>
</dap-ds-stack>

Background

Background shade can be set to none, subtle, base, medium, strong. It changes the background color of the list item.

<dap-ds-stack>
  <dap-ds-list-item variant="info" shade="none">Background: none</dap-ds-list-item>
  <dap-ds-list-item variant="info" shade="subtle">Background: subtle</dap-ds-list-item>
  <dap-ds-list-item variant="pass" shade="base">Background: base</dap-ds-list-item>
  <dap-ds-list-item variant="fail" shade="medium">Background: medium</dap-ds-list-item>
  <dap-ds-list-item variant="notapplicable" shade="strong">Background: strong</dap-ds-list-item>
</dap-ds-stack>

Alignment

Alignment can be set to horizontal or vertical. It changes the alignment of the content of the list item.

<dap-ds-stack>
  <dap-ds-list-item variant="info" shade="subtle">Background: subtle</dap-ds-list-item>
  <dap-ds-list-item alignment="vertical" variant="pass" shade="subtle">Background: base</dap-ds-list-item>
</dap-ds-stack>

Interactive

Interactive can be set to true to make the list item interactive. This will render an anchor tag instead of a div, and it can accept any link attributes. However this can be changed also by the renderAs attribute which can be changed to button.

<dap-ds-stack>
  <dap-ds-list-item interactive>Interactive</dap-ds-list-item>
  <dap-ds-list-item
    interactive
    renderAs="button"
    onClick={() => alert('Button clicked')}
  >Interactive as button</dap-ds-list-item>
</dap-ds-stack>

Custom Icon

Custom icon can be set by using the icon attribute or adding content to the slot='icon'. It can be any svg icon.

<dap-ds-stack>
  <dap-ds-list-item icon="home-6-line">Custom Icon: Icon attribute</dap-ds-list-item>
  <dap-ds-list-item>
    <dap-ds-icon-cookie-line slot="icon"></dap-ds-icon-cookie-line>
    Custom Icon: Slot icon
  </dap-ds-list-item>
</dap-ds-stack>

Importing

import { DapDSListItem } from 'dap-design-system/dist/dds'

Importing React

import { DapDSListItemReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`variant`	`'info'`, `'pass'` , `'fail'` , `'notapplicable'` , `'empty'` , `'number'`	`'info'`	The variant of the list item.
`shade`	`'none'`, `'subtle'` , `'base'` , `'medium'` , `'strong'`	`'base'`	The background strongness of the list item.
`status`	`'transparent'`, `'brand'` , `'neutral'` , `'positive'` , `'negative'`	`'neutral'`	The status of the list item.
`alignment`	`'horizontal'`, `'vertical'`	`'horizontal'`	The alignment of the list item.
`title`	`string`		The title of the list item.
`icon`	`string`		The icon of the list item. This is an icon name from the built in icons.
`number`	`number`		The number of the list item. Only used when variant is 'number'.
`interactive`	`boolean`		Whether the list item is interactive. Generates an anchor tag.
`target`	`'_blank'`, `'_self'` , `'_parent'` , `'_top'`	`'_self'`	The link target of the list item when interactive.
`href`	`string`		The href of the list item when interactive
`rel`	`string`	`'noreferrer noopener'`	The rel of the list item when interactive
`noIcon`	`boolean`		Whether the list item has an icon.
`noPadding`	`boolean`		Whether the list item has no padding.
`renderAs`	`'a'`, `'button'`	`'a'`	The render as type of the list item, only applicable when interactive.

Slots

Name	Description
`(default)`	The content of the list item.
`icon`	The icon of the list item.
`title`	The title of the list item.
`actions`	The actions of the list item.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main list item container.
`icon`	The icon of the list item.
`title`	The title of the list item.
`description`	The description of the list item.
`container`	The container of the list item.
`list-item-base`	The base list item container.
`icon-container`	The container of the icon.
`title-container`	The container of the title.
`description-container`	The container of the description.
`actions-container`	The container of the actions.
`iteractive-indicator-container`	The container of the interactive indicator.

CSS Custom Properties

Property Name	Description
`--dds-list-item-gap`	Gap between list item elements (default: var(--dds-spacing-200))
`--dds-list-item-content-gap`	Gap between content elements (default: var(--dds-spacing-200))
`--dds-list-item-horizontal-gap`	Gap for horizontal alignment (default: var(--dds-spacing-300))
`--dds-list-item-vertical-gap`	Gap for vertical alignment (default: var(--dds-spacing-200))
`--dds-list-item-icon-size`	Size of the icon (default: var(--dds-spacing-600))
`--dds-list-item-number-size`	Size of the number icon (default: 20px)
`--dds-list-item-actions-gap`	Gap between action elements (default: var(--dds-spacing-400))
`--dds-list-item-actions-padding`	Padding for the actions container (default: var(--dds-spacing-100))
`--dds-list-item-background-base`	Background color for base shade (default: var(--dds-background-neutral-base))
`--dds-list-item-background-subtle`	Background color for subtle shade (default: var(--dds-background-neutral-subtle))
`--dds-list-item-background-medium`	Background color for medium shade (default: var(--dds-background-neutral-medium))
`--dds-list-item-background-strong`	Background color for strong shade (default: var(--dds-background-neutral-strong))
`--dds-list-item-icon-brand`	Color for brand icon (default: var(--dds-icon-brand-subtle))
`--dds-list-item-icon-neutral`	Color for neutral icon (default: var(--dds-icon-neutral-base))
`--dds-list-item-icon-positive`	Color for positive icon (default: var(--dds-icon-positive-subtle))
`--dds-list-item-icon-negative`	Color for negative icon (default: var(--dds-icon-negative-subtle))
`--dds-list-item-title-color`	Title text color (default: var(--dds-text-neutral-strong))
`--dds-list-item-description-color`	Description text color (default: var(--dds-text-neutral-base))
`--dds-list-item-number-text-color`	Number text color (default: var(--dds-text-neutral-inverted))