import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
import { Card } from '~components/Card'
import * as Examples from './margin.stories'

<Meta of={Examples} />

# Margin

<Description />

<Unstyled>
  <Card variant="informative" classNameOverride="w-fit mb-24">
    <div className="font-family-paragraph p-24">
      <p>
        The padding prefix &apos;m-&apos; has been used in the examples in this document, which
        compiles to the `margin` property in CSS.
      </p>
      <p>
        Note that there are other prefixes (such as `ml-` for `margin-left`) that can be used
        instead. Available padding prefixes can be referenced
        <a href="https://tailwindcss.com/docs/margin#basic-usage">here</a>.
      </p>
    </div>
  </Card>
</Unstyled>

<Story of={Examples.Margin} />