list-wrapper
Props
| Prop name | Type | Default | Description |
|---|---|---|---|
small | boolean | undefined | false | Enables small layout |
Elem | "ul" | "ol" | undefined | ul | List element |
extraClasses | string | undefined | Injection in className | |
children | ListWrapperItemComp | ListWrapperItemComp[] | Required | A one or more `ListWrapperItem` components. See ListWrapperItem |
The ListWrapper renders a list (ul or ol) with an outlining border around the items.
The list wrapper accepts one or more ListWrapperItem components:
import { ListWrapper, ListWrapperItem } from '@flixbus/honeycomb-react'; <ListWrapper> <ListWrapperItem>Eevee</ListWrapperItem> <ListWrapperItem>Flareon</ListWrapperItem> <ListWrapperItem href="example.com">Vaporeon</ListWrapperItem> <ListWrapperItem href="example.com">Jolteon</ListWrapperItem> </ListWrapper>
It has a smaller layout that removes the outline and has smaller spacing sizes.
import { ListWrapper, ListWrapperItem } from '@flixbus/honeycomb-react'; <ListWrapper small> <ListWrapperItem>You can use this style when</ListWrapperItem> <ListWrapperItem>Available vertical space is a constraint</ListWrapperItem> <ListWrapperItem href="example.com">It works well with longer lines</ListWrapperItem> <ListWrapperItem href="example.com">And also accepts links</ListWrapperItem> </ListWrapper>