Featured Posts

Display a list of posts in a card format

npm run add FeaturedPosts

Use the FeaturedPosts component to display a list of posts in a card format. Each post can include an image, badge, title, description, author, and publish date.

Preview

Diagram explaining Astro Islands architecture

Core Concept Understanding Astro Islands Architecture

Josh Wayne 2024/03/12

Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity. Read more ->

Rendering How Rendering Works in Astro: SSG, SSR, and Hybrid

Jane Dane 2024/04/02

Astro supports static site generation, server-side rendering, and hybrid rendering in a single project. Read more ->
Components Using Multiple UI Frameworks in Astro
Chris Floyd 2024/05/10
Astro allows you to mix and match UI frameworks like React, Vue, and Svelte in the same project. Read more ->

Unlock code

---
const items = [{
    img: {
        src: '/img/astro-islands.png',
        alt: 'Diagram explaining Astro Islands architecture',
        width: 1200,
        height: 200
    },
    badge: {
        text: 'Core Concept',
        icon: rocket // Pass an SVG string to your icon
    },
    title: 'Understanding Astro Islands Architecture',
    author: {
        avatar: {
            img: '/img/avatars/josh-wayne.png'
        },
        name: 'Josh Wayne'
    },
    publishDate: '2024/03/12',
    description: 'Astro Islands let you ship zero JavaScript...',
    href: '/astro-islands',
    cta: 'Read more ->'
}, { ... }, { ... }]
---

<FeaturedPosts items={items} />

The component only requires a items prop referencing an array of Post object. If posts have a featured image, only the first one will be displayed to increase visual hierarchy. The first post will be displayed in its own column, while the other posts will be displayed in a list layout.

Reverse Layout

In case you want to display the first featured post on the right side, you can set the reverse prop to true to reverse the layout:

Reverse layout

Core Concept Understanding Astro Islands Architecture

Josh Wayne 2024/03/12

Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity. Read more ->

Rendering How Rendering Works in Astro: SSG, SSR, and Hybrid

Jane Dane 2024/04/02

Astro supports static site generation, server-side rendering, and hybrid rendering in a single project. Read more ->
Components Using Multiple UI Frameworks in Astro
Chris Floyd 2024/05/10
Astro allows you to mix and match UI frameworks like React, Vue, and Svelte in the same project. Read more ->

Unlock code

<FeaturedPosts
    items={items}
    reverse={true}
/>

API

Unlock code

type FeaturedPostsProps = {
    items: Post[]
    reverse?: boolean
    className?: string
}

Documentation for Post

Prop	Purpose
`items`	Sets the posts to display.
`reverse`	Set to `true` to reverse the layout.
`className`	Pass additional CSS classes for the card.