Text
is a general purpose typography component. Castle UI also exports semantic components for headings.
Typography
import { Text, H1, H2, H3, H4, H5, H6 } from "@passfort/castle";
<Box mb={6} p={4} border="1px solid" borderColor="N50" borderRadius="regular">
<H4 color="text-disabled">Heading 1</H4>
<H1 mb={3}>Heading 1</H1>
<H4 color="text-disabled">Heading 2</H4>
<H2 mb={3}>Heading 2</H2>
<H4 color="text-disabled"> Heading 3 </H4>
<H3 mb={3}> Heading 3 </H3>
<H4 mb={3}> Heading 4 </H4>
<Text>Body text</Text>
</Box>
live example
Bold
Lists
<Row spacing={6}>
<UL>
<LI bold>List Item</LI>
<LI bold>List Item</LI>
</UL>
<OL>
<LI>List Item</LI>
<LI>List Item</LI>
</OL>
</Row>
live example