Navigation: [/sitemap.md](/sitemap.md)

---
type: block
category: "features"
title: "Features 3"
description: "Horizontal cards with rich media that tell a visual story alongside the feature copy."
---

```astro live props={{ name: 'features-3' }}
---
import Features3Block from "@/components/blocks/features-3.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Features3Block
  title="Designed for every screen"
  description="Horizontal cards with rich media that tell a visual story alongside the feature copy."
  features={[
    {
      title: "Responsive layouts",
      description:
        "Every section adapts gracefully from mobile to ultrawide without extra configuration.",
      image: { src: placeholderImage, alt: "Responsive layout preview" },
    },
    {
      title: "Accessible by default",
      description:
        "Semantic markup, keyboard navigation, and screen reader support built into every component.",
      image: { src: placeholderImage, alt: "Accessibility preview" },
    },
    {
      title: "Visual consistency",
      description:
        "Shared design tokens keep spacing, color, and typography aligned across all sections.",
      image: { src: placeholderImage, alt: "Design tokens preview" },
    },
    {
      title: "Instant previews",
      description:
        "See exactly how blocks look in context with the live preview shell.",
      image: { src: placeholderImage, alt: "Live preview" },
    },
  ]}
/>
```