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

typography

body

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

footer

• footer link

header

• main nav link

buttons

• primary
• secondary
• tertiary
• text link

images

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

• testimonial text
• author text

faq accordion

• question title (h3)
• answer text

cards

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