Card content is usually organized in smaller sections (.section) to be more easily digestible. A card section can be any valid HTML5 element with the appropriate class applied to it.
This is a section with some textual content.
<div class="card"> <div class="section"></div> <div class="section"></div> </div>`], notes: [ `While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.`, `Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.`, `Media sections have a default height of
200px.`,
`Due to the media sections using object-fit, you might want to use a polyfill for better browser support (recommended: image polyfill, video polyfill).`,
`Depending on the source website, some embedded videos might not display properly as media sections.`
],
customization: [
`Text color for cards and card sections can be changed by changing the value of the --card-fore-color variable.`,
`Background color for cards and card sections can be changed by changing the value of the --card-back-color variable.`,
`Border color for cards and card sections can be changed by changing the value of the --card-border-color variable.`,
`You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`,
`Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.`
],
modifiers: [
{
title : 'Media sections',
description: 'You can create sections for media (.media), such as images or videos (using an <img> or a <iframe> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.
<div class="card"> <img src="image.png" class="section media"/> </div>`] }, { title : 'Color variants', description: '
You can create sections with a darker (.dark) background, by applying the appropriate modifier.
<div class="card"> <div class="section dark"></div> </div>`] }, { title : 'Additional spacing', description: '
You can create sections with additional spacing (.double-padded), by applying the appropriate modifier.
<div class="card"> <div class="section double-padded"></div> </div>`] } ], dos: [], donts: [ { description: `Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.`, sample: `
<div class="card"> <div class="section"></div> <p>This should have been a section!</p> </div>` } ] } /* Modifiers: { title : '', description: '', example: '', samples: [] } Dos/Donts: { description: '', sample: '' } */