Card with List

Display list of key points within a card

npm run add CardWithList

Use the CardWithList component to present structured information inside a visually contained card layout, combining an optional image, title, subtext, badge, and an ordered or unordered list of key points. You can use them for feature breakdowns (e.g., “What’s included”), step summaries or process overviews, benefit lists on landing pages, and service or product comparisons.

Build Sites with Astro Beginner

Learn the fundamentals of Astro

• Island architecture explained
• Zero-JS by default
• File-based routing
• Component framework agnostic

<CardWithList
    img={{
        src: '/img/placeholder7.png',
        alt: 'Astro islands architecture illustration',
        width: 50,
        height: 50
    }}
    title="Build Sites with Astro"
    subText="Learn the fundamentals of Astro"
    list={[
        'Island architecture explained',
        'Zero-JS by default',
        'File-based routing',
        'Component framework agnostic'
    ]}
    badge={{ text: 'Beginner' }}
/>

The component can be configured in many different ways to get visually distinct elements. However, the only required props are title and list:

<CardWithList
    title="Card with required props only"
    list={[
        'Island architecture explained',
        'Zero-JS by default',
        'File-based routing',
        'Component framework agnostic'
    ]}
/>

The img, subText, and badge props are optional, as well as the other props discussed below. In case your card is situated below the fold, you can set img.lazy to true to enable lazy loading for the image.

Badges

The component supports a badge that can be displayed on the top right corner of the card. You can set the badge.text prop to display the badge. Optionally, you can also set the badge.icon prop to display an icon for the badge:

Card with badge Code on GitHub

• Island architecture explained
• Zero-JS by default
• File-based routing
• Component framework agnostic

<CardWithList
    ...
    badge={{
        text: 'Code on GitHub',
        icon: 'github' // Can be an SVG string or an icon type defined in the Icon component
    }}
/>

List Types

By default, the component uses an unordered list (ul). You can switch to an ordered list (ol) by setting the type prop to ol:

Unordered List Beginner

Learn the fundamentals of Astro

• Island architecture explained
• Zero-JS by default
• File-based routing
• Component framework agnostic

Ordered List Beginner

Learn the fundamentals of Astro

1. Island architecture explained
2. Zero-JS by default
3. File-based routing
4. Component framework agnostic

<CardWithList
    ...
    type="ol"
/>

Themes

The component also comes with a theme prop that allows you to set the color of bullet points to one of the following: info, success, warning, and alert.

Info theme Beginner

Learn the fundamentals of Astro

• Island architecture explained
• Zero-JS by default
• File-based routing
• Component framework agnostic

Success theme Beginner

Learn the fundamentals of Astro

1. Island architecture explained
2. Zero-JS by default
3. File-based routing
4. Component framework agnostic

Warning theme Beginner

Learn the fundamentals of Astro

• Island architecture explained
• Zero-JS by default
• File-based routing
• Component framework agnostic

Alert theme Beginner

Learn the fundamentals of Astro

1. Island architecture explained
2. Zero-JS by default
3. File-based routing
4. Component framework agnostic

<CardWithList
    ...
    theme="info" {/* or 'success' | 'warning' | 'alert' */}
    badge={{ text: 'Beginner', theme: 'info' }}
/>

API

type CardWithListProps = {
    img?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    title: string
    subText?: string
    list: string[]
    type?: 'ol' | 'ul'
    theme?: BadgeProps['theme']
    badge?: {
        text?: string
        icon?: string
    } & BadgeProps
} & CardProps