Features banner

How to use

<Section>
<Markdown>

# Features banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

</Markdown>
</Section>

import FeaturesBanner from "~/components/banners/Features.astro";

<FeaturesBanner
  heading="Lorem ipsum dolor sit amet, consectetur!"
  features={[
    {
      icon: "material-symbols:arrow-right-alt",
      label:
        "Discover in-depth information about our platform and how it can benefit your projects.",
    },
    {
      icon: "material-symbols:star-outline",
      label: "Browse through our comprehensive list of features designed to enhance your workflow.",
    },
    {
      icon: "material-symbols:rocket-launch-outline",
      label: "Begin your journey with our easy-to-follow setup guide and quick start tutorials.",
    },
    {
      icon: "material-symbols:headset-mic-outline",
      label:
        "Reach out to our support team for personalized assistance and answers to your questions.",
    },
    {
      icon: "material-symbols:menu-book-outline",
      label: "Access detailed guides, API references, and best practices in our documentation.",
    },
  ]}
/>

Props

Prop	Type	Description
columns	number	(optional) Number of columns to display the features on desktop. Default is 3.
features	array of objects	(optional) An array of feature objects to render. See fields below.
heading	string	The heading or title displayed by the component, usually a heading element <h1-4>
class	string	(optional) Additional classes applied to the root <section>.
(extends)	HTMLAttributes<"section">	(optional) All standard HTML attributes for a <section>.

feature object

• label — string
  The visible text on the button.
• icon — string
  (optional) Icon name including the Iconify set prefix if not local (e.g. material-symbols:sunny-outline).

The features prop is an array of feature objects.

Useful links

• Material Symbols icons reference

More examples