Grids¶

Card grids¶

Enable required extensions: docs/zensical.toml

[project.markdown_extensions]
attr_list = {}
md_in_html = {}

Simple example¶

Markdown

List syntax: Begin each card block with a dash.

<div class="grid cards" markdown>

- :fontawesome-brands-html5: __HTML__ for content and structure
- :fontawesome-brands-js: __JavaScript__ for interactivity
- :fontawesome-brands-css3: __CSS__ for text running out of boxes
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
- <h2 style="color: teal;">Text outside card -></h2>

Est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.

</div>

HTML for content and structure
JavaScript for interactivity
CSS for text running out of boxes
Internet Explorer … huh?
Text outside card ->

Est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.

Complex example¶

Markdown

List syntax: Begin each card block with a dash.

<div class="grid cards" markdown>

-   :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__

    ---

    Install [`zensical`](#) with [`pip`](#) and get up
    and running in minutes.

    [:octicons-arrow-right-24: Getting started](#)

-   :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__

    ---

    Focus on your content and generate a responsive and searchable static site.

    [:octicons-arrow-right-24: Reference](#)

-   :material-format-font:{ .lg .middle } __Made to measure__

    ---

    Change the colors, fonts, language, icons, logo and more with a few lines.

    [:octicons-arrow-right-24: Customization](#)

-   :material-scale-balance:{ .lg .middle } __Open Source, MIT__

    ---

    Zensical is licensed under MIT and available on [GitHub].

    [:octicons-arrow-right-24: License](#)

</div>

Set up in 5 minutes

Install zensical with pip and get up and running in minutes.

Getting started
It’s just Markdown

Focus on your content and generate a responsive and searchable static site.

Reference
Made to measure

Change the colors, fonts, language, icons, logo and more with a few lines.

Customization
Open Source, MIT

Zensical is licensed under MIT and available on GitHub.

License

Buttons¶

Enable required extension: docs/zensical.toml

[project.markdown_extensions]
attr_list = {}

Rectangular buttons¶

Button markdown

[Zensical Buttons](https://zensical.org/docs/authoring/buttons/){ .md-button }

Zensical Buttons

Primary button markdown

[Zensical Buttons](https://zensical.org/docs/authoring/buttons/){ .md-button .md-button--primary }

Zensical Buttons The ‘primary’ button is usually the default button in a group.

Primary button markdown with icon

[:fontawesome-solid-paper-plane: Fly me to the moon](https://zensical.org/docs/authoring/buttons/){ .md-button .md-button--primary }

Fly me to the moon

Rounded buttons¶

See: 17+ CSS Round Buttons

Enable the extra_css extension: docs/zensical.toml

[project]
extra_css = [
    "stylesheets/extra.css"

Add custom CSS: docs/stylesheets/extra.css

/* Custom rounded button style */
md-button.md-button--rounded {
  border-radius: 2rem; /* Soft, pill-shaped edge */
  padding-inline: 1.5rem; /* Extra padding looks better on round buttons */
}

.md-button.md-button--rounded-corners {
  border-radius: 0.5rem; /* Rounded corners */
  padding-inline: 1.5rem;
}

Rounded buttons markdown

[:fontawesome-solid-paper-plane: Rounded Button](https://zensical.org/docs/authoring/buttons/){ .md-button .md-button--rounded }
[:fontawesome-solid-paper-plane: Primary Rounded Button](https://zensical.org/docs/authoring/buttons/){ .md-button .md-button--primary .md-button--rounded }
[:fontawesome-solid-paper-plane: Rounded Button](https://zensical.org/docs/authoring/buttons/){ .md-button .md-button--rounded-corners }
[:fontawesome-solid-paper-plane: Primary Rounded Button](https://zensical.org/docs/authoring/buttons/){ .md-button .md-button--primary .md-button--rounded-corners }

Rounded Button

Primary Rounded Button

Rounded Corners

Primary Rounded Corners