1. Kanga
  2. Components

Card

Cards are used to show preview content for things like articles or diary posts.

Open this example in a new tab
View the code for this example 
{% from 'includes/card.njk' import card as card %}

{{ card({
  classes: 'boats',
  title: 'A lovely day for boating',
  cover: {
    url: '/assets/images/articles/68/view.jpg'
  },
  caption: 'An exciting article',
  summary: 'A life on the open seas, a life on the ocean wave.',
  url: '#',
  date: {
    datetime: '2023-08-20T00:00:00Z',
    title: '20 August 2023'
  },
  badge: '3 photos',
  meta: [
    {
      key: 'Boats',
      value: '2'
    },
    {
      key: 'Waves',
      value: '657,897'
    }
  ]
})}}

Nunjucks Macro parameters

Name Type Description
classes string Classes to add to the card container.
cover object Provide a cover object to show a background image.
cover.url string The URL for the cover image.
cover.isCollage bool Set to true if the cover appears in collages.json.
title string Required. The title of the entry.
caption string A caption for the title.
summary string A summary of the entry.
url string Required. The url of the entry.
badge string A decorative badge. Usually used to show the number of images in a dairy post.
meta object Provide metadate about the entry.
meta.key title The meta item title.
meta.value title The meta item value.