Supported cards

September 23, 2018
Qards - List of supported cards

This is a list with all the supported types of cards. This list will be updated with each additions so make sure you check it out regularly.


Card Hero

Well, you're looking at it. It has a title and subtitle.

The hero (name subject to change as I'm not sure it's the right one) is like a heading. It is being used to separate chapters and its title will be included in the Table of contents that follows every post.


Galleries

One or multiple images that will be inserted accordingly

A gallery can contain a single picture or multiple ones. When multiple images are linked, the gallery will create a slider for them. Each image will also open (when clicked) in a full page modal for preview (not currently supported).


Audio playlist

An audio playlist can contain one or multiple audio files
LostDeep techno
  • Lost

Reveals

Accordions of collapsed content

Code blocks

Sections of code that you want to present
export default class PostTags extends Component<Props, State> {
    render() {
        const {post, ...props} = this.props;
        const {tags} = post;

        return (
            <Wrapper flexWrap={"wrap"} alignItems={"space-between"} {...props}>
                {tags.map((tag) => {

                    return <Link to={`/tags/${tag.slug}/`} key={tag.id}>
                        {tag.title}
                    </Link>
                })}
            </Wrapper>
        );
    }
}

Video embed

Simple widget that supports all major video platforms and embeds from their source

A rare footage of a very young Mike Tyson sparring Jimmy Clark in 1983


Callouts

Callouts visually highlight important content for the user. They can contain a title, an icon and a message.
tick

Success

The general population doesn't know whats happening and it doesn't even know that it doesn't know

info-sign

Info

The general population doesn't know whats happening and it doesn't even know that it doesn't know

warning-sign

Warning

The general population doesn't know whats happening and it doesn't even know that it doesn't know

error

Danger

The general population doesn't know whats happening and it doesn't even know that it doesn't know


Countdown

Timezone aware countdowns to events

0
0
0
0
days
hours
minutes
seconds
Ended on 2025-10-04 14:00:00Etc/UTCTime until robots take over the world
The singularity is near

Sometimes you want to inform your users of certain events. Dealing with dates, events and timezones has always been a struggle. This widget renders a countdown to a specified date and it shows the remaining time and event date in the user's timezone which is detected by the browser. Everything is clear and confusion-free.


Reference

Reference another post within a card

Using references you can link to other posts. A card is automatically created with the post title, excerpt and post cover (if exists). The card is meant to refer to other posts and keep your readers engaged.

Romeo Mihalcea

Programmer for over 15 years. I'm a full stack developer and a UX freak. Author of Qards.