Definition-list

Jump To:

Definition list styles

Demos

Basic Stacked Layout

The default layout, which stacks terms and their definitions vertically.

Application Version: v2.4.5 (Stable)
Release Date: October 12, 2024

<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>

Table Layout

Using the `definition-list--table` modifier to create a two-column grid on larger screens.

Project Owner: Jane Doe
Primary Language: TypeScript (with Sass for styling)

<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>

Inline-All Layout

Using the `definition-list--inline-all` modifier to place terms and definitions on the same line.

Status: Connected
Uptime: 99.9%

<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>

Separated Layout

Using the `definition-list--separated` and `definition-list--separated-first` modifiers to add borders between items.

Support Tier: Premium (24/7)
Service SLA: 99.99% Availability Guaranteed

<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>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "margin" : (0 0 1.5em 0),
  "term-font-weight": true,
  "term-color" : null,
  "line-height": true,
  "item-margin" : 1em,
  "separator": true,
  "separator-border": true,
  "table-breakpoint": "medium",
  "table-template-columns": (25% 75%),
  "table-gap": 1rem,
  "inline-description-separator": ",",
  "inline-term-separator": ":",
  "compact-item-margin" : 0.5em
);

File Information

File: _definition-list.scss
Group: definition-list
Type: variable
Lines (comments): 33-46
Lines (code): 48-62

Map Properties

Name	Type	Default	Description
term-font-weight	String	true	The font-weight of the dt element.
term-color	String	null	Set a color for the term
line-height	Dimension	true	The line-height of the definition list.
item-margin	CssUnit	0.75em	The spacing for each item.
separator	Boolean	true	Whether to show a separator between items.
separator-border	Border	true	The border style for the separator.
separator-padding	Dimension	0.75em	The padding for the separator.
table-breakpoint	String	medium	The breakpoint for the table layout.
table-template-columns	String	(25% 75%)	The grid-template-columns for the table layout.
table-gap	Dimension	1rem	The gap for the table layout.
inline-description-separator	String	","	The separator for multiple dd elements in inline layout.
inline-term-separator	String	":"	The separator for dt elements in inline layout.

Mixins

set()

Mixin

Change modules $config

File Information

File: _definition-list.scss
Group: definition-list
Type: mixin
Lines (comments): 64-67
Lines (code): 69-71

Examples

@include ulu.component-definition-list-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _definition-list.scss
Group: definition-list
Type: mixin
Lines (comments): 83-86
Lines (code): 88-181

Demo

View

Examples

@include ulu.component-definition-list-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _definition-list.scss
Group: definition-list
Type: function
Lines (comments): 73-76
Lines (code): 78-81

Examples

@include ulu.component-definition-list-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config