Components

Card

Create flexible cards with a semantic markup that provides graceful spacings across various devices and viewports.

I’m a card!

<article>I’m a card!</article>

You can use <header> and <footer> inside <article>.

Sectioning#

Header

Body

<article>
  <header>Header</header>
  Body
  <footer>Footer</footer>
</article>

Optionally, you can use <main> to wrap the body content.

<article>
  <header>Header</header>
  <main>Body</main>
  <footer>Footer</footer>
</article>