Rich text 02
One column of policy text with section headings and a numbered list.
Last updated
---
/**
* 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>
Show codeHide 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
h2by default, so the block slots into a page under itsh1; item titles are one level down.
Related
ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.
ShareLinksWays to pass a page on; Copy link, the device's share sheet and email.
TableOfContentsThe sections of a long page as in-page links in a named nav; one level of nesting and a current marker.