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

Typography

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

<>
  <Title type="xxl">Title XXL </Title>
  <Title>Title XL </Title>
  <H1>Heading 1</H1>
  <H2>Heading 2</H2>
  <H3> Heading 3 </H3>
  <H4> Heading 4 </H4>
  <Text>Body text</Text>
  <Text type="small">Small</Text>
  <Text type="data">Data</Text>
</>
<>
  <Title type="xxl">Title XXL </Title>
  <Title>Title XL </Title>
  <H1>Heading 1</H1>
  <H2>Heading 2</H2>
  <H3> Heading 3 </H3>
  <H4> Heading 4 </H4>
  <Text>Body text</Text>
  <Text type="small">Small</Text>
  <Text type="data">Data</Text>
</>
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

Overflow

If contents of the Text are overflowing, you can set textOverflow as tooltip, to show the text truncated with ellipsis, and show full contents in a popover tooltip.

<Text textOverflow="tooltip" w="40">
  Long contents of the text that go outside the bounds of the element.
</Text>
<Text textOverflow="tooltip" w="40">
  Long contents of the text that go outside the bounds of the element.
</Text>
content_copy
Copy
live example

Accessibility

using the as prop allows visual styling to differ from semantic structure, which can be important for screen readers.

<Stack>
  <H1 as="h2">H1 as H2</H1>
  <H2 as="h3">H2 as H3</H2>
  <Text type="h2" as="h3">
    Text
  </Text>
</Stack>
<Stack>
  <H1 as="h2">H1 as H2</H1>
  <H2 as="h3">H2 as H3</H2>
  <Text type="h2" as="h3">
    Text
  </Text>
</Stack>
content_copy
Copy
live example