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

Создавайте интересные и невероятные статьи на своей странице. Компонент статьи состоит из самой статьи, заголовка и метаданных. HTML разметка. Руководство по использованию.

Создание

Компонент 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">
        <h2 class="uk-article-title">
            <a class="uk-link-reset" href="">Заголовок статьи</a>
        </h2>
        <p class="uk-article-meta">
        	<span class="uk-margin-small-right" uk-icon="bookmark"></span>
        	Автор: <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>

Article