Sizes
<Card>
<Eyebrow className='m-b-half'>Size 'large' (20px)</Eyebrow>
<BodyText className='m-b-2 t-truncate' size='large'>The quick brown fox jumps over the lazy dog</BodyText>
<Eyebrow className='m-b-half'>Size 'medium' (16px)</Eyebrow>
<BodyText className='m-b-2 t-truncate' size='medium'>The quick brown fox jumps over the lazy dog</BodyText>
<Eyebrow className='m-b-half'>Size 'small' (14px)</Eyebrow>
<BodyText className='m-b-2 t-truncate' size='small'>The quick brown fox jumps over the lazy dog</BodyText>
<Eyebrow className='m-b-half'>Size 'xsmall' (12px)</Eyebrow>
<BodyText className='m-b-2 t-truncate' size='xsmall'>The quick brown fox jumps over the lazy dog</BodyText>
</Card>
Styles
<Card>
<BodyText className='m-b-2'>This is default state</BodyText>
<BodyText className='m-b-2' bold>Body Text 'bold'</BodyText>
<BodyText className='m-b-2' italic>Body Text 'italic'</BodyText>
<BodyText className='m-b-2' inline>Body Text 'inline'</BodyText>
<BodyText className='m-b-2' inline subdued>Body Text 'subdued' & 'inline'</BodyText>
</Card>
* The inline property would takes up only the space required and does not start on a new line.
Best Practices
Importing
import { BodyText } from '@servicetitan/design-system';
