Card Container

Every requested card design, built from one box plus markdown. Nothing about the content is a param.

{{< card-container >}} takes appearance tokens only (documented in the style guide). The body follows a few positional conventions:

  • A picture as the first block is the media: flush with the card, 16:9, cropped. A picture with its own width (image shortcode) is just an inline picture at that size.
  • Layout inside the card is not a param. Use row / column (now with nowrap, gap, align, and a fixed column width) to put things side by side. Each column keeps the slot rules: a trailing button, hotlink or badge is pinned to the column’s bottom, and a picture in a column is an inset picture with the card’s corner radius.
  • A lone Font Awesome icon as the first block is the accent icon.
  • Headings are titles. A linked first heading (### [Title](/url)) or a linked first picture makes the whole card clickable.
  • A trailing button, hotlink or badge line is pinned to the bottom. A rule (---) right before the last block turns that block into a footer note.

1. Rhino Courses (WWW-3607)

{{< card-container >}}
![Level 1 - Training Manual](/images/leveloneguide.jpg)
### [Level 1 - Training Manual](/learn)
A complete introduction to 3-D modeling in Rhino…

**[Robert McNeel & Associates Course](/learn) · By Mary Ann Fugier**

{{< badge background="#2f8a34" outline="true" >}}Beginner{{< /badge >}} ~24 hrs

{{< button link="/learn" block="true" >}}Start course →{{< /button >}}
{{< /card-container >}}

2. Tutorials & Guides (WWW-3611)

Badge last, so it is the pinned line.

3. Community & Channels (WWW-3614)

Icon first, plain heading (not linked, so no hover), hotlink last.

4. Text cards (WWW-3623, WWW-3628)

A rule under the title is a divider. A rule before the last paragraph makes it a footer.

5. Icon cards, horizontal (WWW-3675)

No layout param. The card is the box; a row nowrap="true" with a fixed-width first column puts the picture beside the text, and the column width is the picture size.

{{< card-container border="accent" hover="lift" >}}
{{< row nowrap="true" gap="small" align="center" >}}
{{< column width="96px" >}}
![food4Rhino](/images/food4rhino-256x256.png)
{{< /column >}}
{{< column >}}
### [food4Rhino](https://www.food4rhino.com)
+800 apps/resources for Rhino and Grasshopper.
{{< /column >}}
{{< /row >}}
{{< /card-container >}}

The linked heading inside the column still makes the whole card clickable.

6. Appearance tokens

Same body, one param changed per card. The heading is a plain ### line inside each.

radius

border, shadow

hover

padding, background, centering

cropped, letterboxed and sized pictures

The middle one is a picture-only card: the linked picture is the whole-card link.

8. Interop

In a column

Survives the column’s markdown pass.

  • one
  • two

Next to it

Second column. No first-block picture, no icon: just text.

Classroom

Standalone, picture beside text

Full width, in flowing text. row nowrap + column width="200px".

Go

Text continues after it.

7. Subscribe banner (WWW-3622)

The Subscribe shortcode inside a card. Text left, button right: row nowrap="true" align="center", and the button’s column is width="auto" so it only takes the space the label needs. On a gray card the pill rests on white.

{{< card-container background="gray" border="none" >}}
{{< row nowrap="true" align="center" >}}
{{< column >}}
### Stay in the loop
Get new guides, materials, and workshop alerts in your inbox.
{{< /column >}}
{{< column width="auto" >}}
{{< subscribe maillist="profession" id="2" label="Sign up for Educator News" />}}
{{< /column >}}
{{< /row >}}
{{< /card-container >}}

Stay in the loop

Get new guides, materials, and workshop alerts in your inbox.

Sign up for Educator News

Please sign in to your Rhino Account to subscribe to this mailing list.

Stacked, as a card’s last block: the button is pinned to the bottom like a button.

Error: card-container: radius="huge". See the comment at the top of layouts/shortcodes/card-container.html.