Text is a general purpose typography component. Castle UI also exports semantic components for headings.

Typography

import { Text, H1, H2, H3, H4, H5, H6, Title } from '@passfort/castle'
content_copy
Copy

<Box mb={6} p={4} border="1px solid" borderColor="N50" borderRadius="regular">
  <H4 color="text-disabled">XXL</H4>
  <Title type="xxl">Title XXL </Title>
  <H4 color="text-disabled">XL</H4>
  <Title>Title XL </Title>
  <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 color="text-disabled"> Heading 4 </H4>
  <H4 mb={3}> Heading 4 </H4>
  <H4 color="text-disabled"> Body </H4>
  <Text>Body text</Text>
  <H4 color="text-disabled"> Small </H4>
  <Text type="small">Small</Text>
  <H4 color="text-disabled"> Data </H4>
  <Text type="data">Data</Text>
</Box>
<Box mb={6} p={4} border="1px solid" borderColor="N50" borderRadius="regular">
  <H4 color="text-disabled">XXL</H4>
  <Title type="xxl">Title XXL </Title>
  <H4 color="text-disabled">XL</H4>
  <Title>Title XL </Title>
  <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 color="text-disabled"> Heading 4 </H4>
  <H4 mb={3}> Heading 4 </H4>
  <H4 color="text-disabled"> Body </H4>
  <Text>Body text</Text>
  <H4 color="text-disabled"> Small </H4>
  <Text type="small">Small</Text>
  <H4 color="text-disabled"> Data </H4>
  <Text type="data">Data</Text>
</Box>
content_copy
Copy
live example

Bold

<Text bold>Text</Text>
<Text bold>Text</Text>
content_copy
Copy
live example

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>
<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>
content_copy
Copy
live example