Статья

Используйте эти классы для оформления статей на своих страницах.

Как использовать компонент Article в UIkit 3. Создаем статьи.

Компонент Article состоит из самой статьи, заголовка и метаданных.

Класс Описание
.uk-article Добавьте этот класс для определения компонента Article. Обычно он проставляется к одноименному тегу — <article>.
.uk-article-title Добавьте этот класс к элементу заголовка, чтобы стилизовать заголовок статьи. Например, к тегу <h1>.
.uk-article-meta Добавьте этот класс в абзац, содержащий метаданные о вашей статье. 
<article class="uk-article">
    <h1 class="uk-article-title"></h1>
    <p class="uk-article-meta"></p>
</article>

Используте класс .uk-text-lead из компонента Text для создания вводного абзаца.

  • Заголовок

    Автор Super User. Дата публикации: 12 Апреля 2012. Опубликовано в Блог

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Подробнее 
  • <article class="uk-article">

    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Заголовок</a></h1>

    <p class="uk-article-meta">Автор <a href="#">Super User</a>. Дата публикации: 12 Апреля 2012. Опубликовано в <a href="#">Блог</a></p>

    <p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <div class="uk-grid-small uk-child-width-auto" uk-grid>
        <div>
            <a class="uk-button uk-button-text" href="#">Подробнее</a>
        </div>
        <div>
            <a class="uk-button uk-button-text" href="#">5 комментариев</a>
        </div>
    </div>

</article>