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

<Meta title='1.Docs|12-Utilities/Aspect Ratio'/>

# Aspect Ratio

| Class        | Description    
| ------------- |:-------------:
| `.u-aspect-ratio-16x9`      | Create an element with aspect ratio of 16x9
| `.u-aspect-ratio-21x9`      | Create an element with aspect ratio of 21x9
| `.u-aspect-ratio-1x1` | Create an element with aspect ratio of 1x1
| `.u-aspect-ratio-4x3` | Create an element with aspect ratio of 4x3


### 16x9
<Preview>
    <Story name='Aspect Ratio: 16x9'>
        <div className='u-aspect-ratio-16x9' style={{ border: '3px solid #000'}}>16x9</div>
    </Story>
</Preview>

```html
<div className='u-aspect-ratio-16x9'>16x9</div>
```

### 21x9
<Preview>
    <Story name='Aspect Ratio: 21x9'>
        <div className='u-aspect-ratio-21x9' style={{ border: '3px solid #000'}}>21x9</div>
    </Story>
</Preview>

```html
<div className='u-aspect-ratio-21x9'>21x9</div>
```

### 1x1
<Preview>
    <Story name='Aspect Ratio: 1x1'>
        <div className='u-aspect-ratio-1x1' style={{ border: '3px solid #000'}}>1x1</div>
    </Story>
</Preview>

```html
<div className='u-aspect-ratio-1x1'>1x1</div>
```

### 4x3
<Preview>
    <Story name='Aspect Ratio: 4x3'>
        <div className='u-aspect-ratio-4x3' style={{ border: '3px solid #000'}}>4x3</div>
    </Story>
</Preview>

```html
<div className='u-aspect-ratio-4x3'>4x3</div>
```