Default card

How to use

<Section class="mt-4 md:mt-12" columns={3}>
<Markdown class="md:col-span-3">

# Default card

A default content card with a heading and optional description. It can be centered with a prop and is intended for use in columns or with a carousel wrapper.

</Markdown>

import DefaultCard from "~/components/cards/Default.astro";

<DefaultCard
  image={{ src: PreviewImage, alt: "" }}
  heading="Sed do eiusmod tempor incididunt ut
labore"
  description="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat."
  btns={[
    {
      href: "#more-examples",
      label: "Learn more",
      type: "secondary",
      icon: "material-symbols:arrow-right-alt",
    },
  ]}
/>
<DefaultCard
  image={{ src: PreviewImage, alt: "" }}
  heading="Sed do eiusmod tempor incididunt ut
labore"
  description="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat."
  btns={[
    {
      href: "#more-examples",
      label: "Learn more",
      type: "secondary",
      icon: "material-symbols:arrow-right-alt",
    },
  ]}
/>
<DefaultCard
  image={{ src: PreviewImage, alt: "" }}
  heading="Sed do eiusmod tempor incididunt ut
labore"
  description="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat."
  btns={[
    {
      href: "#more-examples",
      label: "Learn more",
      type: "secondary",
      icon: "material-symbols:arrow-right-alt",
    },
  ]}
/>

</Section>

Props

Prop	Type	Description
btns	array of objects	(optional) An array of button objects to render. See 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>
image	object	(optional) Image data for the component. See below.
layout	object	(optional) Layout data for the component. See below.
class	string	(optional) Additional classes applied to the root <div>.
(extends)	HTMLAttributes<"div">	(optional) All standard HTML attributes for a <div>.

btn object

• href — string
  The URL or path the button links to.
• label — string
  The visible text on the button.
• type — "primary" | "secondary" | "text"
  Determines which button style component is rendered.

image object

• src — ImageMetadata
  The imported image metadata (output from Astro’s image import).
• alt — string
  (optional) Alt text for the image, defaults to empty string "".

layout object

• center — boolean (optional) Aligns card text center, default is false.
• direction — “row” | “column”
  (optional) Displays component’s elements in a row or column, default is column.

2 Column Carousel

3 Column Carousel