Card

Strings

Plain card

A title, a description and a body string.

Strings are enough when there is no markup.

{ui card,
	title: 'Plain card',
	description: 'A title, a description and a body string.',
	body: 'Strings are enough when there is no markup.',
	footer: 'Last edited today',
/}

The header, body and footer each appear only when they have content, so a card can be any combination of the three. The parts are plain header, section and footer elements with no classes of their own.

With content

Sign in

Use your account email.

{ui card, title: 'Sign in', description: 'Use your account email.'}
	{ui field,
		name: 'email',
		label: 'Email',
		type: 'email',
		placeholder: '[email protected]',
	/}
	{block footer}
		{ui button, title: 'Continue' /}
		{ui button, title: 'Cancel', variant: 'ghost' /}
	{/block}
{/ui}

Written as a pair, {ui card}...{/ui} takes its content as the body, and {block footer} fills the footer. Components inside get only their own args, so the button's title is not the card's.

One limit comes from Latte: a variable the page already has, with the same name as a card param, shows the card's value inside the card. {$title} in a card's content is the card's title.

Body only

No title, no description and no footer: only the body is drawn.

{ui card}
	<p>No title, no description and no footer: only the body is drawn.</p>
{/ui}

Param	Default	Description
title	null	the heading in the header
description	null	muted text under the title
body	null	the body as a string, or the tag's content
footer	null	the footer as a string, or {block footer}
class	''	added to card
attrs	[]	any other attributes, e.g. ['id' => 'plan']

Params