List
The List is used to create a List
Prop | Description | Value(s) |
---|---|---|
`gap` | To give spaces between elements in the list | `Number` |
`stripped` | To add zebra strips to your List | `Boolean` |
`bordered` | Add a border to your list | `Boolean` |
`hoverable` | Add hoverable effect to list items | `Boolean` |
`light` | Creates a light theme | `Boolean` |
`dark` | Creates a dark theme | `Boolean` |
`roundItems` | Creates a border radius on your list items | `Boolean` |
#
Simple List
Displaying a simple List
React / Next.js
- Mary JaneDiscover how to use FunUI's utility classes to create responsive layouts and consistent spacing with ease.
- John DoeExplore built-in components like buttons, cards, modals, and how to use them to build clean UIs quickly.
- Johnson MichealLearn how to customize FunUI with your own themes and integrate animations for a better user experience.
#
Stripped List
Displaying a simple stripped List
React / Next.js
- Mary JaneDiscover how to use FunUI's utility classes to create responsive layouts and consistent spacing with ease.
- John DoeExplore built-in components like buttons, cards, modals, and how to use them to build clean UIs quickly.
- Johnson MichealLearn how to customize FunUI with your own themes and integrate animations for a better user experience.
#
Bordered List
Displaying a simple bordered List
React / Next.js
- Courses
- Social media marketing
- Programming
- Web Development
- Web Design
- Animation
#
Dark Mode List
Displaying a simple stripped List in dark mode
React / Next.js
- Courses
- HTML
- CSS
- FUN CSS
- JAVASCRIPT