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

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

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 из компонента Текст для выделения начального текста, например, в подзаголовках статей.

Статья с разметкой

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

Автор: Super User Опубликовано: 05 мая 2020 г. Категория: Блог

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

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

5 Комментариев

<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>