UI Elements

Learn how to create useful UI components with ready-to-use code snippets.

Layouts

Made with CSS grid

Grid: Basic

1- Grid: Basic

Grid: Basic with a gap

2- Grid: Basic with a gap

Grid: 1st row 1 item / 2nd row 3 items

3- Grid: 1st row 1 item / 2nd row 3 items

Grid: 2 rows sidebar

4- Grid: 2 rows sidebar

Cards

Card: Vertical - Basic

1- Vertical - Basic

Card: Vertical - Inset

2- Vertical - Inset

Card: Vertical - Group

3- Vertical - Group

Card: Horizontal - Basic

4- Horizontal - Basic

Card: Horizontal - Inset

5- Horizontal - Inset

Card: Horizontal - Group

6- Horizontal - Group

Forms