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


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

Inline settings: header (text) | subhead (text) | image | text | shadow | footer (text)

shadow: high | higher | highest


image: [URL]

subhead: [TEXT]

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

style: <empty> | info | brand | warning | error | success

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]

style: <empty> | info | brand | warning | error | success

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

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


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>


    var tags = riot.mount ("rg-card", {card: {
                            text: "My **precious** text, it's _mine_! It's _mine_!<br />",
                            header: {image: "",
                                    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)}) ;