Skip to main content
Content blocks pair rich text prose with a supporting image, making them the primary vehicle for body copy sections. Each variant controls how the text and image are positioned relative to each other — side-by-side, stacked, reversed, or with additional visual elements like checklist lists.

​
Variants

content-1

Left prose + right image split, with a checklist and two CTA buttons beneath the text.

content-2

Right prose + left image split (image-first layout).

content-3

Centered prose above a full-width image, no checklist.

content-4

Left prose + right image with a stats or numbers row beneath the text.

content-5

Split layout with tabbed content panel replacing the image.

content-6

Split layout with an embedded video in the media area.

​
Sanity _type names

content-1.astro  →  _type: "content-1"
content-2.astro  →  _type: "content-2"
...through content-6

​
Props interface

content-1.astro is the canonical reference: 
// astro-app/src/components/blocks/content-1.astro
interface Props {
  class?: string
  id?: string
  list?: string[]
  links?: {
    icon?: string
    text?: string
    href?: string
    target?: string
  }[]
  image?: {
    src: string
    alt: string
  }
}
​
class
string
Additional CSS classes forwarded to the root <Section> element.
​
id
string
HTML id attribute for in-page anchor links.
​
list
string[]
Array of checklist item strings. Each string is rendered as a <ListItem> prefixed with a check icon. Pass an empty array or omit to suppress the list.
​
links
object[]
CTA buttons rendered below the prose and checklist. The first item uses the default button variant; subsequent items use outline. Each item accepts icon, text, href, and target.
​
image
object
required
Image displayed in the SectionMedia column. Requires src (URL or path) and alt (descriptive text). Rendered via the fulldev/ui <Image> primitive with responsive sizes.
Headline and body copy are passed through the default <slot /> inside <SectionProse>.

​
Storybook story

// astro-app/src/components/blocks/content-1.stories.ts
export const Default = {
  args: {
    links: [
      { text: "Get Started", href: "#" },
      { text: "Learn More", href: "#" }
    ],
    image: {
      src: "https://placehold.co/800x400",
      alt: "Placeholder image"
    },
    list: [
      "First benefit of this product",
      "Second benefit with details",
      "Third key advantage"
    ]
  }
}

​
Component internals

<Section>
  <SectionContent>
    <SectionProse><slot /></SectionProse>
    <List>
      {list?.map(item => (
        <ListItem><Icon name="check" />{item}</ListItem>
      ))}
    </List>
    <SectionActions>{/* links[] → Button variants */}</SectionActions>
  </SectionContent>
  <SectionMedia>
    <Image sizes="(min-width: 1536px) 1536px, 100vw" {...image} />
  </SectionMedia>
</Section>
The Section primitive handles the two-column responsive grid. The image column collapses below the text on small viewports automatically.

​
Installation

npx shadcn@latest add @fulldev/content-1
Repeat for each variant (content-2 through content-6) as needed.
For pages that need alternating left/right image sections, use content-1 and content-2 in sequence — they produce the same split layout with the image side flipped.

Build docs developers (and LLMs) love

Get started for freeTalk to us