Domain

FeatureSection

Marketing section for highlighting product capabilities as a structured feature grid with optional side media.

import { FeatureSection } from '@lostgradient/cinder/feature-section';
marketingfeatureslayout
01

Overview

Renders a feature highlight section in grid or split layout with optional media content.

Usage

svelte 
<script lang="ts">
  import FeatureSection from '@lostgradient/cinder/feature-section';

  const items = [
    { title: 'Fast setup', description: 'Ship your first page in minutes.' },
    { title: 'Accessible by default', description: 'Built with semantic and inclusive defaults.' },
    { title: 'Themeable', description: 'Use tokens to match your brand quickly.' },
  ];
</script>

<FeatureSection title="Why teams choose Cinder" {items} />
Live preview
02

When to use

Use when
  • Showing a list of core benefits with concise title + description content.
  • Pairing a feature list with a screenshot or product demo in a two-column split.
Avoid when
03

Examples

FeatureSection

FeatureSection in split layout with icon-rich feature items and supporting screenshot.

04

Props

Props for feature-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text req Section title rendered above the feature list.
description text Optional supporting intro copy for the section heading.
items FeatureSectionItem[] req Features to render.
layout 'grid' | 'split' 'grid' Section layout mode.
columns 2 | 3 | 4 3 Grid column count used by the grid layout.
mediaPosition 'start' | 'end' 'end' Position of optional media in split layout.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.
media snippet Optional media content for split layout.
children snippet Optional content rendered under the heading before the features list.