Компонент Список описаний

Создавайте красивые списки определений (описаний). Список определений состоит из термина и его описания. Дополнительный класс-модификатор позволяет добавить горизонтальную линию между элементами списка.

Список описаний состоит из термина и его описания. Сам список задается с помощью контейнера с тегом <dl>, термины распологаются внутри <dt>, а описания терминов в тегах <dd>. Список описаний часто используют при создании глоссария или для отображения метаданных (список пар ключ-значение).

Description list: Применение

Добавьте класс .uk-description-list к элементу <dl>, для отображения терминов и их определений (описаний) друг под другом.

<dl class="uk-description-list">
    <dt></dt>
    <dd></dd>
    …
</dl>

Термин: Слово или словосочетание, точно и однозначно именующее понятие и его соотношение с другими понятиями в пределах специальной сферы.
Термин (в логике): Элемент формализованного языка, являющийся именем объекта или именем формы.

<dl class="uk-description-list">
    <dt>Термин</dt>
    <dd>Слово или словосочетание, точно и однозначно именующее понятие и его соотношение с другими понятиями в пределах специальной сферы.</dd>
    <dt>Термин (в логике)</dt>
    <dd>Элемент формализованного языка, являющийся именем объекта или именем формы.</dd>
</dl>

Модификатор «Divider»

Добавьте класс-модификатор .uk-description-list-divider, чтобы добавить горизонтальную линию между элементами списка определений (описаний).

<dl class="uk-description-list uk-description-list-divider">
    <dt></dt>
    <dd></dd>
</dl>

HTML: Стандартизированный язык разметки документов во Всемирной паутине.
CSS: Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
JavaScript: Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.

<dl class="uk-description-list uk-description-list-divider">
    <dt>HTML</dt>
    <dd>Стандартизированный язык разметки документов во Всемирной паутине.</dd>
    <dt>CSS</dt>
    <dd>Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.</dd>
    <dt>JavaScript</dt>
    <dd>Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.</dd>
</dl>

Термин 1: Описание для термина 1; Снова описание для термина 1
Термин 2: Описание термина 2

<dl class="uk-description-list uk-description-list-divider">
    <dt>Термин 1</dt>
    <dd>Описание для термина 1</dd>
    <dd>Снова описание для термина 1</dd>
    
    <dt>Термин 2</dt>
    <dd>Описание термина 2</dd>
</dl>

Термин-определение в div

WHATWG HTML позволяет каждую группу «имя-значение» расположенную в элементе <dl> оборачивать в элемент <div>.

Данный вариант использования получит базовые стили по умолчанию для списка определений, класс .uk-description-list не влияет на внешний вид.

Имя: Весельчак
Место рождения: Долина Бур
Рост: 240см

<dl class="uk-description-list">
    <div>
        <dt>Имя</dt>
        <dd>Весельчак</dd>
    </div>
    <div>
        <dt>Место рождения</dt>
        <dd>Долина Бур</dd>
    </div>
    <div>
        <dt>Рост</dt>
        <dd>240см</dd>
    </div>
</dl>

Дата творения: 1998-08-13T17:31Z
Авторы
Редакторы: Парамон Бублик; София Кекси

<dl class="uk-description-list">
    <div>
        <dt>Дата творения</dt>
        <dd>1998-08-13T17:31Z</dd>
    </div>
    
    <div>
        <dt>Авторы</dt>
        <dt>Редакторы</dt>
        <dd>Парамон Бублик</dd>
        <dd>София Кекси</dd>
    </div>
</dl>