Definition List
Default
The default definition list styles items as a simple stack.
- Short Term
- This is a longer definition to demonstrate how text wraps in the default layout.
- A Much Longer Term That Might Wrap
- A short definition.
Paragraph after to test margins
Separated
The --separated modifier adds a rule between each item.
- Short Term
- This is a longer definition to demonstrate how text wraps.
- A Much Longer Term That Might Wrap
- A short definition.
Separated & Separated First
Using --separated and --separated-first together adds a rule to the top of the first item and between all subsequent items.
- Short Term
- This is a longer definition to demonstrate how text wraps.
- A Much Longer Term That Might Wrap
- A short definition.
Separated & Separated First/Last
You can use all three separator modifiers (--separated, --separated-first, --separated-last) to enclose the entire list in borders.
- Short Term
- This is a longer definition to demonstrate how text wraps.
- A Much Longer Term That Might Wrap
- A short definition.
Table
The --table modifier displays the list in a two-column grid on larger screens.
- Short Term
- This is a longer definition to demonstrate how text wraps in the table layout.
- A Much Longer Term That Might Wrap onto multiple lines
- A short definition.
Table & Separated
Modifiers can be combined. Here is an example of the --table and --separated modifiers used together, with --separated-first to add a top border.
- Short Term
- This is a longer definition to demonstrate how text wraps in the table layout.
- A Much Longer Term That Might Wrap onto multiple lines
- A short definition.
Inline
The --inline modifier displays only the definition descriptions (<dd>) on the same line.
- Term 1
- Definition 1
- Definition 1.1
- This is a much longer definition to see how it wraps when inline.
- A Longer Term
- Definition 2
Inline All
The --inline-all modifier displays both the definition term (<dt>) and its descriptions (<dd>) on the same line.
- Term
- Definition 1
- Definition 1.1
- This is a much longer definition to see how it wraps when inline.
- A Longer Term
- Definition 2
Inline All (no whitespace test)
The --inline-all modifier displays both the definition term (<dt>) and its descriptions (<dd>) on the same line.
- Term
- Definition 1
- Definition 1.1
- This is a much longer definition to see how it wraps when inline.
- A Longer Term
- Definition 2
Inline All Compact
The --compact modifier reduces the margin between items. It can be combined with any other modifier, like --inline-all.
- Term 1
- This is a longer definition to demonstrate how text wraps in the compact inline layout.
- A Longer Term
- Definition 2
Compact Separated
Here is an example combining the --compact spacing modifier with all of the separator modifiers.
- Term 1
- This is a longer definition to demonstrate how text wraps in the compact inline layout.
- A Longer Term
- Definition 2