Skip to content

Latest commit

 

History

History
202 lines (142 loc) · 8.75 KB

card.md

File metadata and controls

202 lines (142 loc) · 8.75 KB

Card

Displays a small piece of "summary" content - a photo, text, a link - about a single subject, as trigger to more detailed information.

This implementation closely follows the design specification. A number of convenience properties have been added to allow different image formats without having to prepare the right image ratio beforehand.

Main features

  • Flexibly composable with card elements in different order
  • Set shadow depth
  • Set avatar portrait image
  • Tight display
  • Horizontal or vertical orientation of actions
  • Crop image from left, center or right
  • Set image ratio
  • Set image size
  • Image overlay
  • RTL (right-to-left) support

Usage

Options

Card specific options

Options for card

Parameter Required Type Default Description
content required Array List of option objects for distinct areas - see below; to pass other content, use children
shadowDepth optional Number 0-5 1 Depth of the shadow
url optional Object with href, optionally oncreate (for Mithril 1.x) or onClick (for React) or to (for React Router) URL for the entire card; Mithril 2.x: only use url.href and set element to m.route.Link; Mithril 1.x: for in-app route linking set oncreate : m.route.link; React: for in-app route linking use onClick and a router such as react-router-dom

Next to the card itself, each content parts has a set of options:

  • primary
  • text
  • media
  • header
  • actions

Options for primary

Parameter Required Type Default Description
element optional String "div" HTML element tag
className optional String Extra CSS class appended to pe-card__primary
title optional String Title text
subtitle optional String Subtitle text
media optional Options object, equal to media part below Media that is shown in this part
actions optional Options object, equal to actions part below Actions that are shown in this part
tight optional Boolean false Set to true to reduce the top and bottom padding
style optional String Style object

Options for text

Parameter Required Type Default Description
element optional String "div" HTML tag
className optional String Extra CSS class appended to pe-card__text
content required String, hyperscript or component Text contents
tight optional Boolean false Set to true to reduce the top and bottom padding
style optional String Style object

Options for header

The header is composed from List Tile. The header accepts all options for List Tile, plus icon.

A Material Design header needs one of these options:

  • icon (or front)
  • title
  • info
  • url
Parameter Required Type Default Description
icon optional Object Icon options object; used to show an round "avatar" portrait image

Options for media

Parameter Required Type Default Description
className optional String Extra CSS class appended to pe-card__media
content required String, hyperscript or component The image or iframe
element optional String "div" HTML tag
origin optional String: "start", "center", "end "center" From which side cropping should be done
overlay optional Options object, equal to card options; see below Content to place on the overlay
showDimmer optional Boolean false Set to true to create an image dimmer; the dimmer does not have a default style
ratio optional String: "landscape" or "square" "landscape" Image ratio; "landscape" translates to 16:9 ratio
size optional String: "small", "medium", "large", "extra-large" For primary media only; defines the image (or iframe) size
style optional String Style object

Options for media.overlay

The media overlay part can contain any card content. Additional options:

Parameter Required Type Default Description
sheet optional Boolean false Set to true to show the overlay as a partly covering sheet

Options for actions

Parameter Required Type Default Description
border optional Boolean false Set to true to add a top border
className optional String Extra CSS class appended to pe-card__actions
content required String, hyperscript or component Action contents, for instance a list of buttons
element optional String "div" HTML tag
layout optional String: "horizontal", "vertical" or "justified" "horizontal" Set to "vertical" for a vertical list of actions; use "justified" for a horizontally evenly spread of icons
tight optional Boolean false Set to true to reduce the top and bottom padding
style optional String Style object

Options for any

Parameter Required Type Default Description
element optional String "div" HTML tag
className optional String Extra CSS class appended to pe-card__any
content required String, hyperscript or component Contents
style optional String Style object

Common component options

Parameter Required Type Default Description
after optional String, hyperscript or component Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth
before optional String, hyperscript or component Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth
className optional String Extra CSS class appended to pe-card
element optional String "a" HTML element tag
events optional Object Options object containing one or more standard events such as onclick (React: onClick)
id optional String HTML element id
style optional String Style object
tone optional String: "dark" or "light" Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone)

Composition

Card is optionally composed from:

CSS classes