72-component index

<div class="sl-grid sl-md:cols-2 sl-gap-4">
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/accordions/#example-1">Accordion ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/feedback/#example-1">Alert ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/alert-dialogs/#example-1">AlertDialog ↗</a>
    </h3>
    <p class="sl-help">Native dialog commands (modern browsers)</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/pickers/#example-1">Autocomplete ↗</a>
    </h3>
    <p class="sl-help">Native datalist</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/avatars/#example-1">Avatar ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/avatars/#example-2">AvatarGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/feedback/#example-2">Badge ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/breadcrumbs/#example-1">Breadcrumbs ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/buttons/#example-1">Button ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/buttons/#example-12">ButtonGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/dates/#example-1">Calendar ↗</a>
    </h3>
    <p class="sl-help">Fixed-month native selection / application calendar</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg"><a href="/light/components/cards/#example-1">Card ↗</a></h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/selection/#example-1">Checkbox ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/selection/#example-2">CheckboxGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg"><a href="/light/components/chips/#example-1">Chip ↗</a></h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/buttons/#example-13">CloseButton ↗</a>
    </h3>
    <p class="sl-help">Native dialog commands (modern browsers)</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/colors/#example-1">ColorArea ↗</a>
    </h3>
    <p class="sl-help">Presentation / application color binding</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/colors/#example-2">ColorField ↗</a>
    </h3>
    <p class="sl-help">Native field / application color binding</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/colors/#example-3">ColorPicker ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/colors/#example-4">ColorSlider ↗</a>
    </h3>
    <p class="sl-help">Native range / application color binding</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/colors/#example-5">ColorSwatch ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/colors/#example-6">ColorSwatchPicker ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/pickers/#example-2">ComboBox ↗</a>
    </h3>
    <p class="sl-help">Native datalist</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/dates/#example-2">DateField ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/dates/#example-3">DatePicker ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/dates/#example-4">DateRangePicker ↗</a>
    </h3>
    <p class="sl-help">Native date fields / application range validation</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/form-patterns/#example-2">Description ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/accordions/#example-7">Disclosure ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/accordions/#example-8">DisclosureGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/drawers/#example-1">Drawer ↗</a>
    </h3>
    <p class="sl-help">Native dialog commands (modern browsers)</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/collections/#example-1">Dropdown ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/form-patterns/#example-3">ErrorMessage ↗</a>
    </h3>
    <p class="sl-help">Presentation / application validation</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/form-patterns/#example-4">FieldError ↗</a>
    </h3>
    <p class="sl-help">Presentation / application validation</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/form-patterns/#example-5">Fieldset ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/form-patterns/#example-6">Form ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg"><a href="/light/components/forms/#example-1">Input ↗</a></h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/text-fields/#example-1">InputGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/text-fields/#example-2">InputOTP ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/keyboard/#example-1">Kbd ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/form-patterns/#example-1">Label ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg"><a href="/light/components/links/#example-1">Link ↗</a></h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/collections/#example-2">ListBox ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/status/#example-1">Meter ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/modals/#example-1">Modal ↗</a>
    </h3>
    <p class="sl-help">Native dialog commands (modern browsers)</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/text-fields/#example-3">NumberField ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/pagination/#example-1">Pagination ↗</a>
    </h3>
    <p class="sl-help">Presentation / application routing</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/popovers/#example-1">Popover ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/status/#example-2">ProgressBar ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/status/#example-3">ProgressCircle ↗</a>
    </h3>
    <p class="sl-help">Presentation / application progress value</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/selection/#example-3">RadioGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/dates/#example-5">RangeCalendar ↗</a>
    </h3>
    <p class="sl-help">Native alternative / application calendar grid</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/surfaces/#example-4">ScrollShadow ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/text-fields/#example-4">SearchField ↗</a>
    </h3>
    <p class="sl-help">Native input / application search</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/forms/#example-1">Select ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/surfaces/#example-2">Separator ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/status/#example-4">Skeleton ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/sliders/#example-5">Slider ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/status/#example-5">Spinner ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/surfaces/#example-1">Surface ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/selection/#example-4">Switch ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/tables/#example-1">Table ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg"><a href="/light/components/tabs/#example-1">Tabs ↗</a></h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/chips/#example-2">TagGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/text-fields/#example-6">TextArea ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/text-fields/#example-5">TextField ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/dates/#example-6">TimeField ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/toasts/#example-1">Toast ↗</a>
    </h3>
    <p class="sl-help">Native popover / application notification lifecycle</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/buttons/#example-14">ToggleButton ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/buttons/#example-15">ToggleButtonGroup ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/surfaces/#example-3">Toolbar ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/tooltips/#example-1">Tooltip ↗</a>
    </h3>
    <p class="sl-help">Native HTML / CSS</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">
      <a href="/light/components/typography/#example-1">Typography ↗</a>
    </h3>
    <p class="sl-help">Existing StyloftCSS component</p>
  </article>
</div>