Article

import { Article, Heading, Paragraph, Section } from '@systhemaui/next'

export default function Demo() {
  return (
    <Article>
      <Heading.h1>Field notes from the coast</Heading.h1>
      <Paragraph type="lead">
        Loose content in an article sits in a centred column at container width, minus the article
        padding.
      </Paragraph>
      <Paragraph>
        Headings, paragraphs and lists placed directly inside get the rich-text rhythm, so you never
        space them by hand.
      </Paragraph>
      <Section layoutBackground="alternative" padding={2}>
        <Heading.h2>A section spans the full width</Heading.h2>
        <Paragraph>
          Sections break out of the text column and carry their own grid. The article puts one
          section padding of space around them.
        </Paragraph>
      </Section>
      <Paragraph>Back in the article column after the section.</Paragraph>
    </Article>
  )
}

import { Article, Heading, Paragraph, Section } from '@systhemaui/next'

export default function Demo() {
  return (
    <Article>
      <Section padding={2}>
        <Heading.h3>Plain section</Heading.h3>
        <Paragraph>No theme, no background.</Paragraph>
      </Section>
      <Section padding={2}>
        <Heading.h3>Another plain section</Heading.h3>
        <Paragraph>The padding between the two is removed: they read as one band.</Paragraph>
      </Section>
      <Section padding={2} theme="default" layoutBackground="alternative">
        <Heading.h3>A section with a background</Heading.h3>
        <Paragraph>A background starts a new band with its own padding.</Paragraph>
      </Section>
      <Section padding={2} theme="default" layoutBackground="alternative">
        <Heading.h3>Same theme and background again</Heading.h3>
        <Paragraph>
          Matching theme and background on adjacent sections merges them into one band.
        </Paragraph>
      </Section>
    </Article>
  )
}

import { Article, Heading, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Article theme="dark" layoutBackground="main">
      <Heading.h2>Night mode for one page</Heading.h2>
      <Paragraph>
        theme="dark" re-resolves every color below the article from the dark color-system mode.
      </Paragraph>
      <Paragraph type="small">With the default tokens, the modes are default and dark.</Paragraph>
    </Article>
  )
}

import { Article, Figure, Heading, Image, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Article>
      <Figure width="screen">
        <Image
          src="/demo-assets/coast.webp"
          alt="Waves breaking on a rocky coast"
          width={1800}
          height={1200}
          aspectRatio="21/9"
        />
      </Figure>
      <Heading.h2>No gap above the image</Heading.h2>
      <Paragraph>
        A screen-width figure as the first child removes the article's top padding.
      </Paragraph>
    </Article>
  )
}