Signposting banner

How to use

<Section>
<Markdown>

# Signposting 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 SignpostingBanner from "~/components/banners/Signposting.astro";

<SignpostingBanner
  heading="Lorem ipsum dolor sit amet, consectetur!"
  btns={[
    {
      href: "#more-examples",
      label: "Learn more",
      icon: "material-symbols:arrow-right-alt",
    },
    {
      href: "#how-to-use",
      label: "Get started",
      icon: "material-symbols:rocket-launch-outline",
    },
    {
      href: "#documentation",
      label: "Documentation",
      icon: "material-symbols:menu-book-outline",
    },
    {
      href: "#support",
      label: "Support",
      icon: "material-symbols:headset-mic-outline",
    },
    {
      href: "#features",
      label: "Features",
      icon: "material-symbols:star-outline",
    },
    {
      href: "#details",
      label: "Details",
      icon: "material-symbols:arrow-right-alt",
    },
    {
      href: "#guides",
      label: "Guides",
      icon: "material-symbols:menu-book-outline",
    },
  ]}
/>

Props

Prop	Type	Description
columns	number	(optional) Number of columns to display the features on desktop. Default is 3.
btns	array of objects	(optional) An array of button 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>.

btn object

• href — string
  The URL or path the button links to.
• 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).

Useful links

• Material Symbols icons reference

More examples