UIkit CSS Framework
UIkit Article
Previous Page
Next Page

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:

Web Tutorials
UIkit Article
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach Coaching Software Computer Software Skill Management Software School Management Software