Cards

View code

New in v3.6! The Blaze cards can be used to display funky (or not) content, with headers, images and optional footers.

Use

As with all RiotGear2 tags you can use markdown in your text!

Inner Content from within the <rg-card> tag, is placed after any text content.

This content is taken from within the <rg-card> tag. As you can see you can have tags inside here too! (You don't need to call riot.mount either!)

Please Note! content here is never scanned as markdown, it's taken as is. As you can see, you can use HTML markup.

Card Attributes

shadow: high | higher | highest

header:

image: [URL]

subhead: [TEXT]

divider: [BOOLEAN] yes/no or true/false

text: [TEXT] card body text

footer: [TEXT]

text: [TEXT]

divider: [BOOLEAN] yes/no or true/false

style: [STYLE] adds a banded divider below the header (if divider is true)

block: [BOOLEAN] yes/no or true/false. Sets footer items in block mode.

items: [LIST] buttons at bottom of card

text: [TEXT]

active: yes | no OR true | false | active non-active

disbled: yes | no OR true | false | disabled enabled

HTML

The settings for header text, shadows & footer text can be set on a tag by tag basis.


  <rg-card shadow="high | higher | highest" [header="TEXT"] [foooter="TEXT"]></rg-card>

JavaScript


    var tags = riot.mount ("rg-card", {card: {
                            text: "My **precious** text, it's _mine_! It's _mine_!<br />",
                            header: {image: "https://unsplash.it/1024/500?random",
                                    text: "**Master** of the _Universe_",
                                    subhead: "Job Vacancy",
                                    divider: true,
//                                    style: "brand"
                                    },
                            footer: {
                                    text: "Do you like this?",
//                                    divider: true,
//                                    style: "warning",
//                                    block: true,
                                    items: [
                                      {text: "Yes"},
                                      {text: "Maybe", style: "warning"},
                                      {text: "No", style: "error"}
                                    ]}
    }}) ;

    tags[0].on("button-clicked", function (e) {console.log("button-clicked:", e)}) ;