import {Meta, Unstyled} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/wiki/styles/# Item Containers'/>

# Item Containers

The `.wiki-storybook-item` class is a versatile container for demonstrating components. It provides standard rounding, borders, and aspect ratio management.


## Basic Usage

By default, an element has a **1:1** aspect ratio and a maximum width of **1080px**.

```html
<div class="wiki-storybook-item">
  <!-- Content -->
</div>
```

<Unstyled>
  <div class="wiki-storybook-item">
    1:1 Element
  </div>
</Unstyled>


## Internal Labels

The `.wiki-storybook-item__label` element is used for subtitles or notes. By default, it is positioned in the top-left corner.

### Label positioning options:
- Default: Absolute positioning overlaying the content.
- `.wiki-storybook-item__label--static`: Standard static positioning (standard text block).

<Unstyled>
  <div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--compact">
      <div class="wiki-storybook-item__label">Overlay Label</div>
      <div class="wiki-storybook-dummy--size--sm wiki-storybook-dummy--color--blue"></div>
    </div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--compact">
      <div class="wiki-storybook-item__label `.wiki-storybook-item__label--static`">Static Label</div>
      <div class="wiki-storybook-dummy--size--sm wiki-storybook-dummy--color--blue"></div>
    </div>
  </div>
</Unstyled>


## Aspect Ratio Modifiers

Use these modifiers to change the proportions:

- `.wiki-storybook-item--auto`: Automatic height based on content
- `.wiki-storybook-item--rectangle`: **16:9** aspect ratio
- `.wiki-storybook-item--widescreen`: **32:9** aspect ratio
- `.wiki-storybook-item--compact`: **64:9** aspect ratio

<Unstyled>
  <div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">Automatic Height</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--rectangle">16:9 Element</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--widescreen">32:9 Element</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--compact">64:9 Element</div>
  </div>
</Unstyled>


## Grid Sizing

Classes in the format `--squared--[size]` control the element's width within a `.wiki-storybook-group` grid.

- `.wiki-storybook-item--squared--xs`: Spans 3 columns on mobile, 2 on desktop.
- `.wiki-storybook-item--squared--sm`: Spans 6 columns on mobile, 2 or 4 on desktop.
- `.wiki-storybook-item--squared--md`: Spans 12 columns on mobile, 4 or 6 on desktop.
- `.wiki-storybook-item--squared--lg`: Spans 12 columns on mobile, 6 on desktop.
- `.wiki-storybook-item--squared--max`: Full width (12 columns) on any device.

<Unstyled>
  <div class="wiki-storybook-group">
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--xs">XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--xs">XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--sm">SM</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--widescreen wiki-storybook-item--squared--md">MD</div>
    <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--widescreen wiki-storybook-item--squared--max">MAX</div>
  </div>
</Unstyled>




## Additional Modifiers

- `.wiki-storybook-item--widthAuto`: Sets an automatic width (default is `100%`).
- `.wiki-storybook-item--overflowVisible`: Allows content to overflow the borders (disables `hidden`).
- `.wiki-storybook-item--padding`: Adds a standard `16px` inner padding.
- `.wiki-storybook-item--center`: Centers the internal content.
- `.wiki-storybook-item--rtl`: Sets the text direction to right-to-left (for RTL testing).

<Unstyled>
  <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--center">
    Centered content with padding (width: auto)
  </div>
</Unstyled>
