Coming Soon

We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.

Just a demo

The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.

Article

Create articles within your page.

Usage

Note If you are not using Tailwind CSS, you can skip this step. On your tailwind.config.js file, add the Article component within the ui() plugin.

import ui from "franken-ui";
 
ui({
    components: {
        article: {
            hooks: {},
            media: true
        }
    }
}),

The Article component consists of the article itself, a title and meta text.

ClassDescription
.uk-articleAdd this class to define the Article component. Typically you would use an <article> element for this.
.uk-article-titleAdd this class to a heading to create an article title. Typically you would use a <h1> element for this.
.uk-article-metaAdd this class to a paragraph that contains meta text about your article.
<article class="uk-article">
  <h1 class="uk-article-title"></h1>
  <p class="uk-article-meta"></p>
</article>

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

Copy to clipboard

  • Heading

    Written by Super User on 12 April 2012. Posted in Blog

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

  • <article class="uk-article">
  <h1 class="uk-article-title">
    <a class="uk-link-reset" href="">Heading</a>
  </h1>
 
  <p class="uk-article-meta uk-margin">
    Written by <a href="#">Super User</a> on 12 April 2012. Posted in
    <a href="#">Blog</a>
  </p>
 
  <p class="uk-margin uk-text-lead">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip.
  </p>
 
  <p class="uk-margin">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
 
  <div class="uk-grid uk-grid-small uk-margin 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>

Available hooks

Learn more about using hooks.

Hook NameAffected Classes
hook-article.uk-article
hook-adjacent.uk-article + .uk-article
hook-title.uk-article-title
hook-meta.uk-article-meta
hook-misc*