Компонент Статья : Article

Создавайте интересные и невероятные статьи на своей странице.

Как использовать

Компонент Cтатья состоит из самой статьи, заголовка и метаданных. Метаданными статьи принято считать следующую информацию:

  • название статьи
  • аннотация статьи
  • ключевые слова
  • сведения об авторах

и т.д. Данная информация прекрасно индексируется.

Чтобы применить компонент и придать статьям красивые стили, добавьте один из этих классов:

Класс Описание
.uk-article Добавьте этот класс для определения компонента Cтатья.
Как правило, для этого используется элемент <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 из компонента Текст для выделения начального текста, например, в подзаголовках статьи.

Пример статьи с разметкой

  • Заголовок статьи

    Автор даже опасается за своего героя, который только коллежский советник. Надворные советники, может быть, и познакомятся с ним, но те, которые подобрались уже к чинам генеральским.

    Уже более недели приезжий господин жил в городе, разъезжая по вечеринкам и обедам и таким образом проводя, как говорится, очень приятно время. Наконец он решился перенести свои визиты за город и навестить помещиков Манилова и Собакевича, которым дал слово.

  • <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> Опубликовано: 05 мая 2020. Категория: <a href="#">Блог</a></p>
        <p class="uk-text-lead">Автор даже опасается за своего героя, который только коллежский советник. Надворные советники, может быть, и познакомятся с ним, но те, которые подобрались уже к чинам генеральским.</p>
        <p>Уже более недели приезжий господин жил в городе, разъезжая по вечеринкам и обедам и таким образом проводя, как говорится, очень приятно время. Наконец он решился перенести свои визиты за город и навестить помещиков Манилова и Собакевича, которым дал слово.</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>
Документация
Компоненты