CTA banner

How to use

<Section>
<Markdown>

# CTA 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 CtaBanner from "~/components/banners/Cta.astro";

<CtaBanner
  heading="Lorem ipsum dolor sit amet, consectetur!"
  btns={[
    {
      href: "#more-examples",
      label: "Learn more",
      type: "secondary",
      icon: "material-symbols:arrow-right-alt",
    },
  ]}
/>

Props

Prop	Type	Description
btns	array of objects	(optional) An array of button objects to render. See fields below.
description	string	(optional) The component description or supporting text.
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>.

btn object

• href — string
  The URL or path the button links to.
• label — string
  The visible text on the button.
• type — "primary" | "secondary" | "text" | "icon"
  Determines which button style component is rendered.
• icon — string
  (optional) Icon name including the Iconify set prefix if not local (e.g. material-symbols:sunny-outline).

The btns prop is an array of btn objects.

Useful links

• Material Symbols icons reference

More examples