import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
import CopyTable from '../../docs-components/CopyTable/Table.jsx';
import { cssStringToTableArray } from '../../utils/parseCss';

{/* @ts-ignore */}
import boxSizine from '$lib/scss/layout/\_box-sizing.scss?raw';

{/* @ts-ignore */}
import display from '$lib/scss/layout/\_display.scss?raw';

{/* @ts-ignore */}
import floats from '$lib/scss/layout/\_floats.scss?raw';

<Meta title="Styles/Layout/Main" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# Layout classes

<CopyTable
  title="Display"
  mdnLink="display"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(display)}
  copyable={[true, false]}
/>

<CopyTable
  title="Float"
  mdnLink="float"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(floats)}
  copyable={[true, false]}
/>

<CopyTable
  title="Box sizing"
  mdnLink="box-sizing"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(boxSizine)}
  copyable={[true, false]}
/>