Features

Use the features component to showcase features of your product.

You can use it in a handful of modes; in all of them you pass an items array and it renders a beautiful features section.

Use it like:

<%= render "components/railsfast/marketing/features",
  mode: :grid,
  title: "Everything you need",
  subtitle: "A fast overview of what you get out of the box.",
  title_alignment: "center",
  padding: "py-16 sm:py-24",
  items: [
    { title: "Fast setup", description: "Ship in days, not weeks.", icon: "bolt" },
    { title: "Secure by default", description: "Sane defaults everywhere.", icon: "shield-check" }
  ] %>

Common parameters (wrapper):

• mode: one of the modes below (default: :grid)
• items: array of feature items (required)
• title: section title (optional)
• subtitle: section subtitle (optional)
• title_alignment: "center" (default), "left", "right"
• title_max_width: "2xl" (default), "3xl", "4xl", "full"
• padding: section padding classes (default: "py-16 sm:py-24")

Icons:

• For the modes that support it, icon uses Heroicons names (example: "bolt", "shield-check").

Feature modes

Grid mode

:grid: card grid with optional badges, bullet points, and CTA. Good to showcase multiple features at once

Item fields: { title:, description:, icon:, badge:, points:, cta: }

Alternating mode

:alternating: the bread and butter of features in landing pages. Rows that alternate their alignment left and right, with big images on the other side. Good for telling a story

Item fields: { title:, description:, image:, image_class:, points: }

Specific paramenters:

• image_aspect: "video" (default), "square", "photo"
• layout: "balanced" (default), "image_large", "content_large"
• compact: true/false

Bento mode

:bento: “bento box” mosaic for mixed-size, more visual feature blocks

Item fields: { title:, description:, bento_size:, image:, image_position:, icon:, badge:, points:, cta:, extra_content: }

Icons mode

:icons: best for a section of 3 highlighted features

Item fields: { icon:, title:, description:, cta:, accent_color: }

Specific parameters:

• columns: 2, 3 (default), 4, 6
• icon_style: "rounded" (default), "circle", "square", "none"
• icon_size: "small", "medium" (default), "large"
• icon_variant: :solid (default) or :outline
• accent_color: hex/CSS color (example: "#84cc16") — can also be set per item via accent_color
• alignment: "center" (default) or "left"
• compact: true/false

List mode

:list: simple checkmark list in different columns that looks clean and organized

Item fields: either a string ("Simple feature") or { title:, description: }