List with Images

Sequence of items paired with images, arranged in an alternating layout

npm run add ListWithImages

Use the ListWithImages component to display a sequence of items paired with images, arranged in an alternating left-right layout for visual balance and storytelling flow. They provide the following benefits:

• Improves readability: Alternating layout breaks monotony and keeps users engaged.
• Enhances storytelling: Combines text and visuals to explain features, steps, or benefits clearly.
• Flexible use: Works for step-by-step guides, product highlights, or feature overviews.

Preview

Step 1 Setup

Install the Astro UI component library with a single command. Get started instantly without worrying about complex configurations.

Get Started ->

Step 2 Configure

Customize themes, tweak components, and integrate easily with your Astro project. Built to adapt to your brand and workflow.

View Docs

Final step Enjoy

Drop components directly into your Astro pages and enjoy a faster workflow with polished, accessible UI out of the box.

Start Building

---
// Your import path to your icons might differ
// Icons are provided with the component
import terminalIcon from '@icons/terminal.svg?raw'

const listWithImageItems = [
    {
        badge: {
            text: 'Step 1',
            icon: terminalIcon,
            theme: 'warning'
        },
        img: {
            src: '/img/step-1.png',
            alt: 'Installing Astro UI library',
            width: 250,
            height: 250
        },
        title: 'Setup',
        description: 'Install the Astro UI component library...',
        cta: {
            text: 'Get Started ->',
            href: '/get-started'
        }
    },
    { ... },
    { ... }
]
---

<ListWithImages items={listWithImageItems} />

The component expects an items prop that accepts an array of objects for the list items. Each list item can have the following properties:

• badge: Sets a badge above the title. You can use BadgeProps along with a text and icon property to define your badges.
• img: Sets the image for the list item. In case the list is situated below the fold, you can set img.lazy to true to lazy load images.
• title: Sets the title of the list item. Titles will be rendered as h2 tags, but you can easily change this in the component itself.
• description: Sets a description for the list item under the title. Supports HTML.
• cta: Displays a button under the description. You can use ButtonProps along with a text and icon property to define your cta.

Badges and Buttons

Badges and buttons are optional for the items, you can also create the component items with only an image, title and description. Regardless of the amount of content, elements will be vertically center-aligned with the image:

Setup

Install the Astro UI component library with a single command. Get started instantly without worrying about complex configurations.

Configure

Customize themes, tweak components, and integrate easily with your Astro project. Built to adapt to your brand and workflow.

Enjoy

Drop components directly into your Astro pages and enjoy a faster workflow with polished, accessible UI out of the box.

Alternate Layout

You can also switch the alternating order of the component by setting the secondary prop to true:

Step 1 Setup

Install the Astro UI component library with a single command. Get started instantly without worrying about complex configurations.

Get Started ->

Step 2 Configure

Customize themes, tweak components, and integrate easily with your Astro project. Built to adapt to your brand and workflow.

View Docs

Final step Enjoy

Drop components directly into your Astro pages and enjoy a faster workflow with polished, accessible UI out of the box.

Start Building

<ListWithImages
    items={listWithImageItems}
    secondary={true}
/>

API

type ListWithImagesProps = {
    items: {
        badge?: {
            text: string
            icon?: string
        } & BadgeProps
        img: {
            src: string
            alt: string
            width: number
            height: number
            lazy?: boolean
        }
        title: string
        description: string
        cta?: {
            text?: string
            icon?: string
        } & ButtonProps
    }[]
    secondary?: boolean
    className?: string
}