import { Meta } from '@storybook/blocks';
import '../../components/button/button';
import '../../components/input-text/input';
import '../../components/textlinks/textlinks';
import styles from './styles.module.css';

<Meta title="Grundelemente/Abstände" />

# Spacings

Es können die nachfolgenden css custom properties (aka css variables) genutzt
werden. Sie werden Hauptsächlich dafür gebraucht um Abstände zwischen Elementen
und semantischen Blöcken zu definieren.

```json
--spacing-xxxs // 2px
--spacing-xxs // 4px
--spacing-xs // 8px
--spacing-s // 12px
--spacing-m // 16px
--spacing-l // 24px
--spacing-xl // 32px
--spacing-xxl // 48px
--spacing-xxxl // 64px
--spacing-xxxxl // 88px
```

Die spacing Variablen sollten im Zusammenhang mit dem CSS Eigenschaften margin
und padding genutzt werden.

Einige kleine Beispiele:

```css
margin-top: var(--spacing-m);
padding: var(--spacing-xl) 0 var(--spacing-l) 0;
```

Beispiel zur Verwendung der Spacing Variablen:

<div>
  <div>
    <h1>Asservatenvorgänge</h1>
  </div>
  <div className={styles['spacing-xs']}>
    <p20-textlinks href="#" label="Beispiel-Link"></p20-textlinks>
  </div>
  <div className={styles['spacing-m']}>
    <p20-button
      label="Neuen Asservatenvorgang anlegen"
      variant="primary"
      size="lg"
      name="add"
    ></p20-button>
  </div>
  <div className={styles['spacing-l']}>
    <p20-input
      label="Beispiel Eingabefeld"
      placeholder="Platzhaltertext..."
    ></p20-input>
  </div>
</div>

<br />
<br />
### Code:

```html
<div>
  <div>
    <h1>Asservatenvorgänge</h1>
  </div>
  <div className={styles['spacing-xs']}>
    <p20-textlinks href="#" label="Beispiel-Link"></p20-textlinks>
  </div>
  <div className={styles['spacing-m']}>
    <p20-button
      label="Neuen Asservatenvorgang anlegen"
      variant="primary"
      size="lg"
      name="add"
    ></p20-button>
  </div>
  <div className={styles['spacing-l']}>
    <p20-input
      label="Beispiel Eingabefeld"
      placeholder="Platzhaltertext..."
    ></p20-input>
  </div>
</div>
```
