Paste assistant Assistant
Figma
Star454

Detail Text

Version 3.1.0GithubStorybookPeer review pending

Detail text is typography used for short pieces of secondary text content.

Your sender identity is the “from” email address your recipients will see in their inbox.
Component preview theme
const DetailTextExample = () => {
return (
<Box maxWidth='size30'>
<Box as='img' alt='' src='/images/detail-text/detail-text-image.png' maxWidth='100%' />
<DetailText>
Your sender identity is the “from” email address your recipients will see in their inbox.
</DetailText>
</Box>
);
};
render(<DetailTextExample />)

The Detail Text component is used for small pieces of text that are secondary to body text in the hierarchy of a page. Common examples include an image caption, chart element legend, or a paragraph footnote.

Detail Text should not be used for body text, and should be reserved for small pieces of content only. It should not be used solely for its stylistic properties within other typographic elements.

The Detail Text component is a div element by default. You can modify the element in situations where a div isn’t semantically correct. For example, set as=”figcaption” if working with Detail Text inside a figure element(link takes you to an external page).

If your Detail Text is used to describe another element, use an id for the Detail Text component and aria-describedby for the other element to make the connection clear.

(information)

Detail Text is not the same as alt text on images. The context and content of your usage might mean including alt text for further detail, or making alt text an empty string to prevent redundancy. Learn more about alt text and when to use it.(link takes you to an external page)


Detail Text below an image

Detail Text below an image page anchor

Use Detail Text to add a caption below an image.

Your sender identity is the “from” email address your recipients will see in their inbox.
Component preview theme
const DetailTextExample = () => {
return (
<Box maxWidth='size30'>
<Box as='img' alt='' src='/images/detail-text/detail-text-image.png' maxWidth='100%' />
<DetailText>
Your sender identity is the “from” email address your recipients will see in their inbox.
</DetailText>
</Box>
);
};
render(<DetailTextExample />)

Detail Text below primary content

Detail Text below primary content page anchor

Use Detail Text to add a description below primary content for extra context.

UserSkillsTasks
Adam Brown
adam@brown.com
English, French, Sales, Spanish35
Adriana Lovelock
adriana@lovelock.com
English, French, Sales, Spanish28
Amanda Cutlack
amanda@cutlack.com
English, French, Sales, Spanish7
Component preview theme
const DetailTextExample = () => {
return (
<Table>
<THead>
<Tr>
<Th>User</Th>
<Th>Skills</Th>
<Th textAlign="right">Tasks</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Th scope="row">
<Text as="span">
Adam Brown
</Text>
<DetailText marginTop='space0'>adam@brown.com</DetailText>
</Th>
<Td>English, French, Sales, Spanish</Td>
<Td textAlign="right">35</Td>
</Tr>
<Tr>
<Th scope="row">
<Text as="span">
Adriana Lovelock
</Text>
<DetailText marginTop='space0'>adriana@lovelock.com</DetailText>
</Th>
<Td>English, French, Sales, Spanish</Td>
<Td textAlign="right">28</Td>
</Tr>
<Tr>
<Th scope="row">
<Text as="span">
Amanda Cutlack
</Text>
<DetailText marginTop='space0'>amanda@cutlack.com</DetailText>
</Th>
<Td>English, French, Sales, Spanish</Td>
<Td textAlign="right">7</Td>
</Tr>
</TBody>
</Table>
);
};
render(<DetailTextExample />)

Detail Text with no top margin

Detail Text with no top margin page anchor

Detail Text includes a marginTop prop to remove its default top margin of space30.

Average handle time

3m
8%
Handle time by hour
Sample graph showing how the handle time increased after 10:00 AM today compared to yesterday.
Today
Yesterday
Component preview theme
const DetailTextExample = () => {
return (
<Box maxWidth='size30'>
<Card>
<Heading
as='h3'
variant='heading50'
marginBottom='space0'
>
Average handle time
</Heading>
<Box display='grid' gridTemplateColumns='1fr auto' marginTop='space70' marginBottom='space90'>
<Text
fontWeight='fontWeightSemibold'
fontSize='fontSize90'
lineHeight='lineHeight70'
>
3m
</Text>
<Box display='flex' flexDirection='row' alignItems='center' color='colorTextPrimary'>
<ArrowUpIcon decorative={true} size='sizeIcon80' />
<Text
fontWeight='fontWeightSemibold'
fontSize='fontSize90'
lineHeight='lineHeight70'
color='inherit'
>
8%
</Text>
</Box>
</Box>
<Text fontSize='fontSize30' lineHeight='lineHeight60'>Handle time by hour</Text>
<Box
as='img'
src='/images/detail-text/graph.png'
maxWidth='100%'
marginBottom='space90'
alt='Sample graph showing how the handle time increased after 10:00 AM today compared to yesterday.'
/>
<Box display='grid' gridTemplateColumns='1fr auto' columnGap='space50'>
<Box
display='flex'
flexDirection='row'
justifyContent='flex-end'
columnGap='space40'
alignItems='center'
>
<Box
borderTopStyle='solid'
borderTopColor='colorBorderPrimary'
borderTopWidth='borderWidth20'
width='sizeSquare50'
/>
<DetailText marginTop='space0'>Today</DetailText>
</Box>
<Box
display='flex'
flexDirection='row'
justifyContent='flex-end'
columnGap='space40'
alignItems='center'
>
<Box
borderTopStyle='dashed'
borderTopColor='colorBorderWeak'
borderTopWidth='borderWidth20'
width='sizeSquare50'
/>
<DetailText marginTop='space0'>Yesterday</DetailText>
</Box>
</Box>
</Card>
</Box>
);
};
render(<DetailTextExample />)

Detail Text as a footnote

Detail Text as a footnote page anchor

Use Detail Text to add a footnote below a paragraph.

Auth tokens

Auth tokens can be used to authenticate while making API requests. You will need to use HTTP Basic Authentication with user = Account SID and password = AuthToken. Auth tokens are specific to your account and can be used to access all API’s for the account.

*Please keep the auth tokens in a secure place and rotate them periodically.
Component preview theme
const DetailTextExample = () => {
return (
<>
<Heading as='h2' variant='heading20'>Auth tokens</Heading>
<Paragraph>
Auth tokens can be used to authenticate while making API requests. You will need to use HTTP Basic Authentication with user = Account SID and password = AuthToken. Auth tokens are specific to your account and can be used to access all API’s for the account.
</Paragraph>
<DetailText>
*Please keep the auth tokens in a secure place and rotate them periodically.
</DetailText>
</>
);
};
render(<DetailTextExample />)

Do

Use Detail Text for small pieces of text that are not the main content of the UI, like graph legends and image captions

Don't

Don’t use Detail Text for body content. Consider using Paragraph instead.

Do

Use Detail Text semantically

Don't

Don’t use Detail Text for stylistic purposes within other typography. Consider using the Text primitive instead.

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.