@ulu/frontend/lib/scss/components/_definition-list.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Basic Stacked Layout
  description: The default layout, which stacks terms and their definitions vertically.
-->
<dl class="definition-list">
  <div>
    <dt>Application Version</dt>
    <dd>v2.4.5 (Stable)</dd>
  </div>
  <div>
    <dt>Release Date</dt>
    <dd>October 12, 2024</dd>
  </div>
</dl>

<!-- @ulu-demo
  title: Table Layout
  description: Using the `definition-list--table` modifier to create a two-column grid on larger screens.
-->
<dl class="definition-list definition-list--table">
  <div>
    <dt>Project Owner</dt>
    <dd>Jane Doe</dd>
  </div>
  <div>
    <dt>Primary Language</dt>
    <dd>TypeScript (with Sass for styling)</dd>
  </div>
</dl>

<!-- @ulu-demo
  title: Inline-All Layout
  description: Using the `definition-list--inline-all` modifier to place terms and definitions on the same line.
-->
<dl class="definition-list definition-list--inline-all">
  <div>
    <dt>Status</dt>
    <dd>Connected</dd>
  </div>
  <div>
    <dt>Uptime</dt>
    <dd>99.9%</dd>
  </div>
</dl>

<!-- @ulu-demo
  title: Separated Layout
  description: Using the `definition-list--separated` and `definition-list--separated-first` modifiers to add borders between items.
-->
<dl class="definition-list definition-list--separated definition-list--separated-first">
  <div>
    <dt>Support Tier</dt>
    <dd>Premium (24/7)</dd>
  </div>
  <div>
    <dt>Service SLA</dt>
    <dd>99.99% Availability Guaranteed</dd>
  </div>
</dl>