Info Card¶

About¶

A composite info card container element, to be used as an item within a grid layout. It implements the Sphinx directive info-card.

Details¶

The info card is a composite element based on nested grid and card components from sphinx-design. It is suitable to be used as an alternative to tables, for example when authoring pages enumerating items with dense information, without the maintenance nightmares of tables.

Synopsis¶

example.org/beagles

A module for collecting votes from beagles,
and for consolidating them.

Author: C. Schultz, Universal Features Syndicate
Contact: Los Angeles, CA; cschultz@peanuts.example.org

foo bar

baz

qux

anything else

Note

This example provides a title with link, a formatted description text, and both verbose and short tags, represented using badges.

For a compact markup to represent the short tag elements, it uses a shortcut notation based on the corresponding Tag, for efficiently rendering sphinx{design} badges with a special appearance.

Usage¶

MARKDOWN

::::{info-card}

:::{grid-item}
:columns: 8
[example.org/beagles](https://example.org/beagles)

A module for collecting votes from beagles, \
and for consolidating them.

**Author:** C. Schultz, Universal Features Syndicate \
**Contact:** Los Angeles, CA; <cschultz@peanuts.example.org>
:::

:::{grid-item}
:columns: 4

{tags-primary}`foo, bar`

{tags-success}`baz`

{tags-secondary}`qux`

{tags-info}`anything else`
:::

::::

RST

.. info-card::

    .. grid-item::
        :columns: 8

        `example.org/beagles <https://example.org/beagles>`_

        | A module for collecting votes from beagles,
        | and for consolidating them.

        | **Author:** C. Schultz, Universal Features Syndicate
        | **Contact:** Los Angeles, CA; <cschultz@peanuts.example.org>

    .. grid-item::
        :columns: 4

        :tags-primary:`foo, bar`

        :tags-success:`baz`

        :tags-secondary:`qux`

        :tags-info:`anything else`

Variants¶

A few more variants how to change the visual appearance.

Curated picture of the day

A mountain goat with long horns standing on a grassy hill.

Author: Jaromír Kalina, @jkalinaofficial
Contact: Czech Republic, https://jkalina.carrd.co/
Exposé: https://unsplash.com/photos/spdQ1dVuIHw
Source: Unsplash – The internet’s source for visuals

Note

Did you ever ask yourself how to align items in a flex container, and how to control all those details within Sphinx documentation markup? The documentation about using sphinx{design} CSS classes to align flexbox items has all the answers. In this case, the items within the left content column are aligned “spaced”, to fill the full major axis, using the sd-align-major-spaced CSS class.

This page is written in Markedly Structured Text (MyST Markdown).