Skip to main content

Feature card

A simple feature card with an icon, heading and optional description. It can be centered with a prop and is intended for use in columns or with a carousel wrapper.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

How to use

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

# Feature card

A simple feature 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 FeatureCard from "~/components/cards/Feature.astro";

<FeatureCard
  heading="Sed do eiusmod tempo"
  description="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris."
  icon={{
    name: "material-symbols:rocket-launch-outline",
    size: 64,
  }}
  layout={{
    center: true,
  }}
/>
<FeatureCard
  heading="Sed do eiusmod tempo"
  description="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris."
  icon={{
    name: "material-symbols:rocket-launch-outline",
    size: 64,
  }}
  layout={{
    center: true,
  }}
/>
<FeatureCard
  heading="Sed do eiusmod tempo"
  description="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris."
  icon={{
    name: "material-symbols:rocket-launch-outline",
    size: 64,
  }}
  layout={{
    center: true,
  }}
/>

</Section>

Props

PropTypeDescription
descriptionstring(optional) The card description or supporting text.
headingstringThe heading displayed by the card, <h3>
iconobjectIcon data for the component. See below.
layoutobject(optional) Layout data for the component. See below.
classstring(optional) Additional classes applied to the root <div>.
(extends)HTMLAttributes<"div">(optional) All standard HTML attributes for a <div>.

icon object

  • name — string
    The icon name, either an iconify package (e.g. material-symbols:sunny-outline) or local name. See below.
  • size — number
    The same value is used for both height and width, number is in pixels.

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.

Examples

2 Columns

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

3 Columns

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

4 Columns

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sed do eiusmod tempo

Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

About MDX

astro-skeleton uses the @astrojs/mdx integration installed and configured in the astro.config.mjs config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating a breeze.

Documentation