Lotus
English简体中文
输入关键词搜索文档。

自定义

Page Blocks

Use reusable Lotus blocks for landing pages, pricing pages, and product pages.

查看 Markdown在 ChatGPT 中打开在 Claude 中打开

Page blocks are optional layout components exported from @prosefly/astro-theme-lotus/blocks. Use them for pages that should share the Lotus design system without using the documentation article layout.

Blocks use Lotus CSS tokens, accept common props for fast setup, and expose slots when a page needs custom content.

Import

astro
---
import {
  CTA,
  FeatureCard,
  FeatureGrid,
  Hero,
  PageContainer,
  PageSection,
  Pricing,
  PricingCard,
} from '@prosefly/astro-theme-lotus/blocks';
---

Containers

Use PageSection for vertical page rhythm and PageContainer for responsive horizontal width. Most higher-level blocks do not include outer page spacing, so you can compose them inside sections.

Page primitives

Compose sections without rewriting spacing utilities.

Use the same spacing and max-width choices as the rest of the Lotus site.

astro
<PageSection container={false} padding="md">
  <PageContainer size="md">
    <h1>Custom page content</h1>
  </PageContainer>
</PageSection>

Hero

Hero supports default, centered, split, and docs variants.

Astro theme

Build documentation and product pages with one system.

Use page blocks for homepages, product pages, pricing pages, and lightweight marketing sections.

Get startedView source
pnpm add @prosefly/astro-theme-lotus
pnpm add @prosefly/astro-components
astro
<Hero
  eyebrow="Astro theme"
  headingLevel={3}
  title="Build documentation and product pages with one system."
  description="Use page blocks for homepages and product pages."
  variant="split"
  actions={[
    { label: 'Get started', href: '/docs/', trailingIcon: 'lucide:arrow-right' },
    { label: 'View source', href: 'https://github.com/prosefly/astro-theme-lotus', external: true, variant: 'outline' },
  ]}
>
  <CodeBlock slot="visual" code="pnpm add @prosefly/astro-theme-lotus" lang="sh" />
</Hero>

Features

Use FeatureGrid with FeatureCard for feature lists and quick links.

Generated routes

Lotus owns docs routes while the rest of the Astro project stays open.

Design tokens

Blocks follow the same color, radius, and typography tokens as the theme.

Composable sections

Use props for common cases and slots for custom content.

astro
<FeatureGrid>
  <FeatureCard icon="lucide:route" title="Generated routes">
    Docs pages can share one navigation shell.
  </FeatureCard>
  <FeatureCard icon="lucide:palette" title="Design tokens">
    Blocks follow the active Lotus appearance.
  </FeatureCard>
</FeatureGrid>

Pricing

Use Pricing and PricingCard for simple pricing sections. The first version does not include billing toggles or subscription logic.

Open Source

Current
$0

Use Lotus for personal, commercial, and team documentation.

  • Astro integration
  • Responsive docs navigation
  • Search and Markdown routes
  • BSD-3-Clause license
Get started

Custom Site

Self-hosted

Deploy the generated Astro site to any static host.

  • No hosted account required
  • No traffic-based theme limits
  • Bring your own analytics
Deployment docs

Sponsorship

Optional

Support ongoing work without unlocking a separate feature tier.

  • Public source
  • Community roadmap
  • Commercial usage allowed
Sponsor

CTA

Use CTA near the end of a landing page or feature page.

Start from the starter template.

Use the same Lotus shell for docs pages, product pages, and static marketing routes.

Install LotusView page layouts

Props And Slots

Props are shortcuts for common content. Slots take priority when present.

BlockMain propsSlots
PageContaineras, sizedefault
PageSectionas, container, containerClass, padding, sizedefault
Herovariant, headingLevel, eyebrow, title, description, actionseyebrow, title, description, actions, visual, footer
FeatureGridcolumnsdefault
FeatureCardtitle, description, icon, href, externaltitle, description, default
Pricingnonedefault
PricingCardname, price, description, features, action, highlighted, badgename, price, description, features, action, badge
CTAvariant, headingLevel, title, description, actionstitle, description, actions

Blocks do not read theme.config.json. They only consume the current Lotus CSS tokens, so they can be used in custom Astro routes and layouts.

最后更新于 2026年8月22日

贡献者