How To Create & Use UikiT Article

The UIkit article component mainly contains a title and metadata.

Steps To Create Uikit Article Component

Use .uk-article class to define the article component, .uk-article-title class is used to define the title of the article, and .uk-article-meta is used to add the article meta information.

Use the .uk-text-lead class to create a leading paragraph.

General Syntax

      <article class="uk-article">
  <h2 class="uk-article-title">Article Title</h2>
  <p class="uk-article-meta">Article meta content</p>
</article>

Try it now

Source Code

     <div class="uk-container">
  <article class="uk-article">
    <h2 class="uk-article-title"><a class="uk-link-reset" href="#">Web Development</a></h2>
    <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012.
      Posted in <a href="#">Blog</a>
    </p>
    <p>Learn web development.</p>
    <p>Learn front-end & back-end web development technology.</p>
    <div class="uk-grid-small uk-child-width-auto" uk-grid>
      <div>
        <a class="uk-button uk-button-text" href="#">Read more</a>
      </div>
      <div>
        <a class="uk-button uk-button-text" href="#">5 Comments</a>
      </div>
    </div>
  </article>
</div>

Try it now

Source Code: Output

The above source code result will be: