Blog Card

Present blog posts or articles in a compact, visually appealing format

Use the BlogCard component to create content previews and increase engagement. The BlogCard component can be used to summarize and highlight key details of an article, such as its title, featured image and snippet, giving users a quick overview before navigating.

Blog Card Preview

With featured image, title and text. The text field also support the use of HTML code. Use the text field to provide preview and additional context about the linked page.

<BlogCard
    href="/link-to-your-article"
    target="_blank"
    img={{
        src: '/img/featured.png',
        alt: 'Blog featured img alt',
        width: 200,
        height: 150
    }}
    title="Blog Card Preview"
    text="..."
    secondary={true}
/>

This will create a secondary blog card. Each card must have an href attribute that points to a page. How the link is opened can be configured using the target prop. To add an image for your BlogCard, specify an img prop object with the following properties:

• src: Sets the url for your image.
• alt: Sets an alternate text for your image.
• width: Sets the width of your image.
• height: Sets the height of your image.
• lazy: Image objects can also have an optional lazy property. Set lazy to true to lazy load the image.

Different Layouts

The above example shows a BlogCard component with a secondary layout. You can create different layout by omitting this prop. The title and text props are also optional, making it possible to create blog cards with a featured image only. This can be useful for links where the image already includes the title of the article, and you don’t want to provide any snippet.

Primary Blog Card

Primary blog card with title and text.

Blog Card Without Text

<BlogCard
    href="/link-to-your-article"
    img={{
        src: '/img/featured.png',
        alt: 'Blog featured img alt',
        width: 200,
        height: 150,
        lazy: true
    }}
    title="Primary Blog Card"
    text="Primary blog card with title and text."
/>

<BlogCard
    href="/link-to-your-article"
    img={{
        src: '/img/featured.png',
        alt: 'Blog featured img alt',
        width: 200,
        height: 150,
        lazy: true
    }}
    title="Blog Card Without Text"
/>

<BlogCard
    href="/link-to-your-article"
    img={{
        src: '/img/featured.png',
        alt: 'Blog featured img alt',
        width: 200,
        height: 150,
        lazy: true
    }}
/>

API

type BlogCardProps = {
    href: string
    target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    img: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    title?: string
    text?: string
    secondary?: boolean
    className?: string
}