import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import imgTheming from './images/theming.jpg'

<Meta title='1.Docs|12-Utilities/Text Sizes'/>

# Text Sizes
You can use a utility on any element to modifiy text, element placement

## Text Sizes

| Class        | Default value | Description    
| ------------- |:-------------:
| `.u-text-xxs` | 1rem      | Modify the text size to xxs
| `.u-text-xs` | 1.2rem      | Modify the text size to xs
| `.u-text-s` | 1.5rem | Modify the text size to s
| `.u-text-m` | 1.8rem | Modify the text size to m
| `.u-text-l` | 2.4rem | Modify the text size to l
| `.u-text-xl` | 3rem | Modify the text size to xl
| `.u-text-xxl` | 3.6rem | Modify the text size to xxl
| `.u-text-xxxl` | 4.8rem | Modify the text size to xxxl

### Text size XXS
<Preview>
    <Story name='Text Size: XXS'>
        <div>
            <p className='u-text-xxs'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-xxs'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

### Text size XS
<Preview>
    <Story name='Text Size: XS'>
        <div>
            <p className='u-text-xs'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-xs'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

### Text size S
<Preview>
    <Story name='Text Size: S'>
        <div>
            <p className='u-text-s'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-s'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

### Text size M
<Preview>
    <Story name='Text Size: M'>
        <div>
            <p className='u-text-m'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-m'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

### Text size L
<Preview>
    <Story name='Text Size: L'>
        <div>
            <p className='u-text-l'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-l'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

### Text size XL
<Preview>
    <Story name='Text Size: XL'>
        <div>
            <p className='u-text-xl'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-xl'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```