yarn add @twilio-paste/detail-text

import { DetailText } from '@twilio-paste/detail-text';

const MyComponent = () => (
  <>
    <Box height="size10" width="size10" backgroundColor="colorBackgroundStrong" />
    <DetailText>This is sample detail text.</DetailText>
  </>
);

<Box>
  <Box height="size10" width="size10" backgroundColor="colorBackgroundStrong" />
  <DetailText>This is sample detail text.</DetailText>
</Box>

<Box>
  <Box height="size10" width="size10" backgroundColor="colorBackgroundStrong" />
  <DetailText marginTop="space0">This is sample detail text with no margin.</DetailText>
</Box>

<DetailText as="span">
  This detail text renders as a span.
</DetailText>

<CustomizationProvider
  theme={theme}
  elements={{
    DETAIL_TEXT: {
      color: 'colorTextNew',
      marginTop: 'space60',
    },
  }}
>
  <Box>
    <Box height="size10" width="size10" backgroundColor="colorBackgroundStrong" />
    <DetailText>This is customized detail text.</DetailText>
  </Box>
</CustomizationProvider>