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

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

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

Применение

Добавьте класс .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>
Description list