Description list
Use when
Use description lists to display sets of simple data that are easy to scan and where the relationships between terms and descriptions are easy to understand.
Use description lists with unordered lists to associate terms with multiple descriptions. Use line breaks or comma-separated values depending on the layout and context.
Use description lists in the long-description mode to display glossaries and other data where the descriptions are complete sentences or longer.
Don't use when
Don't use description lists to highlight important data that the information hierarchy should emphasize. Use key info or other methods to call out information instead.
Don't use description lists when users can understand data based on its context and don't need a label.
Help inline button
When you need to supplement a description list term with additional information but don't require persistent inline help, you can place a help inline button beside the term to invoke contextual user assistance.
Responsiveness (horizontal layout)
Horizontal description lists respond to the width of their containers by changing to 1- and 2-column layouts when appropriate.
Responsiveness (long-description mode)
In long-description mode, description lists respond to the width of their containers by wrapping text or stacking term-description pairs when appropriate.
Don't use colons or other punctuation after description list terms.
Horizontal layout
Use the horizontal layout to display up to 6 term-description pairs in description lists that stand alone.
Vertical layout
Use the vertical layout to make scanning easier when containers include multiple description lists or when description lists are combined with other content. Use a fluid grid to arrange multiple description lists in a container.
Use descriptive headings to make scanning easier.
Components
Guidelines
- Defined in
SkyDescriptionListModule- NPM package
@skyux/layout- Installation
- None found.
npm install --save-exact @skyux/layout
Creates a description list to display term-description pairs.
Selector
sky-description-list
| Input | Description |
|---|---|
defaultDescription?: string | The default description to display when no description is provided for a term-description pair. Optional. Default is "None found" |
listItemWidth?: string | The width of term-description pairs when Optional. |
mode?: SkyDescriptionListModeType | How to display term-description pairs within the description list. Optional. Default is "vertical" |
Specifies the term in a term-description pair. To display a help button beside the term, include a help button element in the sky-description-list-term element and a sky-control-help CSS class on that element.
Selector
sky-description-list-term
Specifies the description in a term-description pair.
Selector
sky-description-list-description
Wraps the term-description pairs in the description list.
Selector
sky-description-list-content
| Input | Description |
|---|---|
helpKey?: string | A help key that identifies the global help content to display. When specified, a help inline button is placed beside the description list content label. Clicking the button invokes global help as configured by the application. Optional. |
helpPopoverContent?: string | TemplateRef<unknown> | The content of the help popover. When specified, a help inline button is added to the description list content. The help inline button displays a popover when clicked using the specified content and optional title. Optional. |
helpPopoverTitle?: string | The title of the help popover. This property only applies when Optional. |
How to display the term-description pairs within a description list.
type SkyDescriptionListModeType = 'horizontal' | 'longDescription' | 'vertical'<sky-description-list mode="vertical">
<sky-description-list-content
*ngFor="let item of items"
[helpPopoverContent]="item.helpText"
>
<sky-description-list-term>
{{ item.term }}
</sky-description-list-term>
<sky-description-list-description>
{{ item.description }}
</sky-description-list-description>
</sky-description-list-content>
</sky-description-list>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { SkyDescriptionListModule } from '@skyux/layout';
@Component({
standalone: true,
selector: 'app-demo',
templateUrl: './demo.component.html',
imports: [CommonModule, SkyDescriptionListModule],
})
export class DemoComponent {
protected items: { term: string; description: string; helpText?: string }[] =
[
{
term: 'College',
description: 'Humanities and Social Sciences',
},
{
term: 'Department',
description: 'Anthropology',
},
{
term: 'Advisor',
description: 'Cathy Green',
helpText: 'The faculty member who advises the student.',
},
{
term: 'Class year',
description: '2024',
},
];
}<sky-description-list mode="horizontal">
<sky-description-list-content
*ngFor="let item of items"
[helpPopoverContent]="item.helpText"
>
<sky-description-list-term>
{{ item.term }}
</sky-description-list-term>
<sky-description-list-description>
{{ item.description }}
</sky-description-list-description>
</sky-description-list-content>
</sky-description-list>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { SkyDescriptionListModule } from '@skyux/layout';
@Component({
standalone: true,
selector: 'app-demo',
templateUrl: './demo.component.html',
imports: [CommonModule, SkyDescriptionListModule],
})
export class DemoComponent {
protected items: { term: string; description: string; helpText?: string }[] =
[
{
term: 'College',
description: 'Humanities and Social Sciences',
},
{
term: 'Department',
description: 'Anthropology',
},
{
term: 'Advisor',
description: 'Cathy Green',
helpText: 'The faculty member who advises the student.',
},
{
term: 'Class year',
description: '2024',
},
];
}<sky-description-list mode="longDescription">
<sky-description-list-content *ngFor="let item of items">
<sky-description-list-term>
{{ item.term }}
</sky-description-list-term>
<sky-description-list-description>
{{ item.description }}
</sky-description-list-description>
</sky-description-list-content>
</sky-description-list>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { SkyDescriptionListModule } from '@skyux/layout';
@Component({
standalone: true,
selector: 'app-demo',
templateUrl: './demo.component.html',
imports: [CommonModule, SkyDescriptionListModule],
})
export class DemoComponent {
protected items: { term: string; description: string }[] = [
{
term: 'Good Health and Well-being',
description:
'Ensure healthy lives and promote well-being for all at all ages.',
},
{
term: 'Quality Education',
description:
'Ensure inclusive and equitable quality education and promote lifelong learning opportunities for all.',
},
{
term: 'Gender Equity',
description: 'Achieve gender equality and empower all women and girls.',
},
];
}<sky-description-list mode="horizontal">
<sky-description-list-content
*ngFor="let item of items"
[helpPopoverContent]="item.helpText"
>
<sky-description-list-term>
{{ item.term }}
<sky-help-inline
class="sky-control-help"
ariaLabel="Information about {{ item.term }}"
(actionClick)="onActionClick()"
/>
</sky-description-list-term>
<sky-description-list-description>
{{ item.description }}
</sky-description-list-description>
</sky-description-list-content>
</sky-description-list>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { SkyHelpInlineModule } from '@skyux/indicators';
import { SkyDescriptionListModule } from '@skyux/layout';
@Component({
standalone: true,
selector: 'app-demo',
templateUrl: './demo.component.html',
imports: [CommonModule, SkyDescriptionListModule, SkyHelpInlineModule],
})
export class DemoComponent {
protected items: { term: string; description: string; helpText?: string }[] =
[
{
term: 'College',
description: 'Humanities and Social Sciences',
},
{
term: 'Department',
description: 'Anthropology',
},
{
term: 'Advisor',
description: 'Cathy Green',
helpText: 'The faculty member who advises the student.',
},
{
term: 'Class year',
description: '2024',
},
];
protected onActionClick(): void {
alert('Help inline button clicked!');
}
}