Customize card design

The blogcard shortcode makes it easy to create a card-like link.

Select card template

You can select a template using the tname attribute. Built-in templates are below:

tname="default"

{{< blogcard https://quarto.org tname="default" >}}

Quarto

An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more. Supports Python, R, Julia, and JavaScript.

https://quarto.org

tname="mini"

{{< blogcard https://quarto.org tname="mini" >}}

Quarto

https://quarto.org

An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more. Supports Python, R, Julia, and JavaScript.

tname="tiny"

{{< blogcard https://quarto.org tname="tiny" >}}

Quarto

Directory structure of built-in templates

Built-in templates are located in /_extensions/blogcard/assets/.

../_extensions/blogcard/assets
├── default
│   ├── template.css
│   └── template.html
├── mini
│   ├── template.css
│   └── template.html
└── tiny
    ├── template.css
    └── template.html

4 directories, 6 files

An example of HTML and CSS files for a template using the built-in ‘tiny’ template.

tiny/template.html

<div class="container my-4">
    <a href="${link}" class="text-decoration-none">
        <botton class="btn btn-outline-primary">
            <div class="d-flex text-overflow">
                <img src="${favicon}" class="favicon-tiny">
                ${title}
            </div>
        </botton>
    </a>
</div>

tiny/template.css

.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favicon-tiny {
    width: 20px;
    height: 20px;
    margin-top: 5px;
    margin-right: 8px;
    vertical-align: middle;
}