Usage
List semantics are handled for you automatically, including the use of ordered
lists where appropriate.
<Columns>
<TextList>
<Text>Bullet</Text>
<Text>Bullet</Text>
<Text>Bullet</Text>
</TextList>
<TextList type="number">
<Text>Number</Text>
<Text>Number</Text>
<Text>Number</Text>
</TextList>
<TextList type="alpha">
<Text>Alpha</Text>
<Text>Alpha</Text>
<Text>Alpha</Text>
</TextList>
</Columns>
Color, size and gap
Lists support the same sizes and colors as Text, and the same gap as Stack.
<Columns>
<TextList color="base" size="large" gap="large">
<Text>Large</Text>
<Text>Large</Text>
<Text>Large</Text>
</TextList>
<TextList color="muted" size="medium" gap="medium">
<Text>Medium</Text>
<Text>Medium</Text>
<Text>Medium</Text>
</TextList>
<TextList color="dim" size="small" gap="small">
<Text>Small</Text>
<Text>Small</Text>
<Text>Small</Text>
</TextList>
</Columns>
Rich content
You can use a Stack as a list item to display multiple lines of text.
<TextList gap="large">
<Stack gap="medium">
<Text weight="bold">This is a paragraph.</Text>
<Text>This is another paragraph.</Text>
</Stack>
<Stack gap="medium">
<Text weight="bold">This is a paragraph.</Text>
<Text>This is another paragraph.</Text>
</Stack>
</TextList>
Nested lists
Lists of varying types can be nested within each other.
<TextList gap="large" type="number">
<Stack gap="medium">
<Text>Number list</Text>
<TextList type="alpha">
<Text>Alpha list</Text>
<Text>Alpha list</Text>
<Text>Alpha list</Text>
</TextList>
</Stack>
<Stack gap="medium">
<Text>Number list</Text>
<TextList type="alpha">
<Text>Alpha list</Text>
<Text>Alpha list</Text>
<Text>Alpha list</Text>
</TextList>
</Stack>
</TextList>
