List

Line up your content with our sleek List. Perfect for a run-down of related content

Example

Intriguing Mysteries of the Deep Sea
The Art of Mindful Living
World's Most Haunted Places
A Brief History of Quantum Physics
Ten Must-Read Classics for Every Book Lover

1  import { List, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' direction='column' justify='center'>
4    <List
5      header='Quick Bites of Knowledge'
6      footer='Stay Curious, Keep Learning'
7    >
8      <List.Item>Intriguing Mysteries of the Deep Sea</List.Item>
9      <List.Item>The Art of Mindful Living</List.Item>
10      <List.Item>World's Most Haunted Places</List.Item>
11      <List.Item>A Brief History of Quantum Physics</List.Item>
12      <List.Item>Ten Must-Read Classics for Every Book Lover</List.Item>
13    </List>
14  </FlexBox>
15

API Reference

Component	Description
List	Say hello to List, your multi-purpose curator of items. Offering ordered or unordered styles with customizable aesthetics, it arranges your content into a neat ensemble, ready for the spotlight.
List.Item	List.Item is the virtuoso performer in List's ensemble, offering extensive customization to help your content shine.
List.Header	List.Header is your friendly guide at the start of your journey. As an encapsulated element at the beginning of your List, it sets the tone, introduces the theme, and creates anticipation for what's to follow. Consider it your List's forward, preface, or introduction.
List.Footer	List.Footer, the elegant conclusion to your well-curated List. Positioned comfortably at the end, it's the place for your closing remarks, summations, or simply a stylized farewell. It's the epilogue that leaves a lasting impression, wrapping up your List's story with grace and finesse.

Component Properties

List

Prop	Type	Default	Explanation
`size`	`string`	md	The comfy fit. Choose 'sm', 'md', or 'lg' to adjust padding and font size according to your needs.
`style`	`string`	unordered	The List’s fashion statement. Specify 'ordered' for a numbered list or 'unordered' for bullet points.
`shadow`	`string`	none	The attention seeker. Add a shadow ranging from 'xs' to 'lg' to elevate your list items off the page.
`bordered`	`boolean`	false	The boundary marker. Enable to draw a border around each item, giving them their individual space.
`interactive`	`boolean`	false	The conversation starter. Enable to highlight items when hovered, nudging your users to interact.
`header`	`string \| React.ReactNode`		The welcoming committee. A string or ReactNode to serve as a stylized introduction to your list.
`footer`	`string \| React.ReactNode`		The farewell note. Like the header, but at the bottom, concluding your list with grace.

List.Item

Prop	Type	Default	Explanation
`title`	`string`		The headline. Give your item a string title that takes center stage.
`description`	`string`		The narrative. A string providing additional details to support your title.
`avatar`	`string \| ReactNode`		The pictorial identity. A URL string or ReactNode, rendering an Avatar Component or any other you'd like.
`avatarShape`	`string`	circle	The avatar stylist. Choose from 'circle', 'rounded', or 'square' to shape your avatar according to your vibe.
`action`	`ReactNode[]`		The interactive element. A ReactNode array, perfect for adding buttons or other actionable elements to the right side of your item.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius