Text

<Card>
    <Eyebrow className='m-b-half'>Size 'xlarge' (32px)</Eyebrow>
    <Headline className='m-b-2 t-truncate' size='xlarge'>The quick brown fox jumps over the lazy dog</Headline>

    <Eyebrow className='m-b-half'>Size 'large' (26px)</Eyebrow>
    <Headline className='m-b-2 t-truncate' size='large'>The quick brown fox jumps over the lazy dog</Headline>

    <Eyebrow className='m-b-half'>Size 'medium' (20px)</Eyebrow>
    <Headline className='m-b-2 t-truncate' size='medium'>The quick brown fox jumps over the lazy dog</Headline>

    <Eyebrow className='m-b-half'>Size 'small' (16px)</Eyebrow>
    <Headline className='m-b-2 t-truncate' size='small'>The quick brown fox jumps over the lazy dog</Headline>
</Card>

<Card>
    <Headline className='m-b-2'>This is default state</Headline>
    <Headline className='m-b-2' italic>Headline 'italic'</Headline>
    <Headline className='m-b-2' inline>Headline 'inline' </Headline>
    <Headline className='m-b-2' inline subdued>Headline 'inline & subdued'</Headline>
</Card>