One column of policy text with section headings and a numbered list.

Last updated

Open block
Show code
---
/**
 * Rich text 02: One column of policy text with section headings and a numbered list.
 *
 * @block content
 * @order 22
 */
import Section from '@/components/apogee/Section/Section.astro'
import Prose from '@/components/apogee/Prose/Prose.astro'
import type { ContentContent } from '@/components/apogee/sections/_shared/content.ts'

/** @composable */
interface Props extends ContentContent {}

const {
  label = 'Policy',
} = Astro.props
---

<Section spacing="large" containerWidth="small" aria-label={label}>
  <Prose>
    <p class="lead">These terms apply to everyone who uses the service. Read them once; we keep them short.</p>
    <h2>What we provide</h2>
    <p>Access to the service, updates and support by email. We may change features with notice.</p>
    <h3>Your account</h3>
    <ol>
      <li>Keep your password to yourself.</li>
      <li>Tell us within 48 hours if you think someone else used your account.</li>
      <li>You own what you upload; we only store and show it to provide the service.</li>
    </ol>
    <h2>Payments and refunds</h2>
    <p>Plans renew each month or year. Cancel any time; you keep access until the end of the period you paid for.</p>
    <h3>Changes to these terms</h3>
    <p>We email you 30 days before a change takes effect.</p>
  </Prose>
</Section>

Add

npx @ava-ui/apogee add content/rich-text-02

This copies the block to src/components/apogee/blocks/content/ with everything it uses: Prose, Section. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or null to hide a part; see copy is props.

Accessibility

  • The heading is an h2 by default, so the block slots into a page under its h1; item titles are one level down.