export default {
  title: 'Foundations/Typography'
};

export const Typography = () => (
  <div className="container">
    <div className="flex flex-col gap-4 mb-5">
      <div className="text-9xl font-bold">Heading</div>
      <div className="text-8xl font-bold">Heading</div>
      <div className="text-7xl font-bold">Heading</div>
      <div className="text-6xl font-bold">Heading</div>
      <div className="text-5xl font-bold">Heading</div>
      <div className="text-4xl font-bold">Heading</div>
      <div className="text-3xl font-bold">Heading</div>
      <div className="text-2xl font-bold">Heading</div>
      <div className="text-xl font-bold">Heading</div>
    </div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
      consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
      doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
      perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p>
      Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
      facilis et quod hic, cumque repellendus quidem expedita explicabo
      architecto, possimus minima!
    </p>
  </div>
);
