Use fenced block plugin to render a card. Markdown content of the card goes here item one item two item three Note: Card scales down large image to fit card ```card books.jpg {title: "My Card"} Markdown content of the card goes here * item one * item two * item three ```

When you use icon like images, e.g. SVGs, then they will take all the horizontal available space, and it may not be ideal. Use to force image height. Use to specify a background color/gradient. Markdown content of the card goes here item one item two item three imageHeight imageBackground ```card diamond.svg {title: "My Card", imageHeight: 120, imageBackground: "linear-gradient(to right, rgb(29 41 41), rgb(145, 152, 229))"} Markdown content of the card goes here * item one * item two * item three ```

Use Colums to arrange cards side by side Markdown content goes here class JsClass { constructor() { usefulAction(); } } export default JsClass; Markdown content of the card goes here item one item two item three Easy to use API firstName String description with markdown support score Integer another description line with markdown support Note: Card plugin is designed to work with code snippets, Tables and API Parameters by reducing spacing and integrating borders List Item One List Item Two column A column B hello world of cards ```````columns left: ```card diamond.svg {title: "Card Title", imageHeight: 120, imageBackground: "linear-gradient(to right, rgb(29 41 41), rgb(145, 152, 229))"} Markdown content goes here :include-file: snippets/file-name.js ``` middle: ```card small-book.png {title: "Book", imageHeight: 120} Markdown content of the card goes here * item one * item two * item three ``` right: `````card star.svg {title: "API for the Win", imageHeight: 120, imageBackground: "linear-gradient(to right, rgb(154 128 145 / 0%), rgb(255 206 206))"} Easy to use API ```api-parameters firstName, String, description with *markdown* support score, Integer, another description line with *markdown* support ``` ````` ````````

Card plugin automatically converts links at the end of the fenced block content into dedicated card links. Markdown content goes here Learn More class JsClass { constructor() { usefulAction(); } } export default JsClass; ```card diamond.svg {title: "Card Title", imageHeight: 120, imageBackground: "linear-gradient(to right, rgb(29 41 41), rgb(145, 152, 229))"} Markdown content goes here :include-file: snippets/file-name.js [Learn More](snippets/external-code-snippets) ```