What to include in your UI KIT

UI kits are an important part of User interface design. They can help keep your project organised and also translate well into development

UI KIT individual components



  • h1
  • h2
  • h3
  • h4
  • h5
  • body text
  • body text link
  • order list item (numbered list)
  • unordered list items (bulleted list)
  • footer link
  • main nav link


  • primary
  • secondary
  • tertiary
  • text link


show the general treatment of the image

  • hero
  • single image

UI KIT Blocks

Complete blocks that are made up of individual components. Below are some of the most common UI KIT Blocks.


  • testimonial text
  • author text

faq accordion

  • question title (h3)
  • answer text


Cards are often used, but not limited to a blog feed. Each card is composed of

  • image
  • tite
  • link
  • text

Cards can also be display in various layouts

  • 3 cards
  • 4 cards
  • mosaic
This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.