Sphinx ScyllaDB Theme 1.0 is now released 🥳
Learn more
Menu

Topic Box

A custom directive that creates graphical boxes (cards) on the root index.rst file.

Warning

Do not use the topic-box on subordinate index.rst files.

Syntax

.. topic-box::
   <options>

   <text>

Options

The topic-box directive supports the following options:

Option

Type

Required

Example Value

Description

title

string

Y

Lorem ipsum

Topic box title.

icon

string

fa fa-home

A list of CSS classes to render icons, separated by comma or space.

image

string

/_static/img/mascots/scylla-enterprise.svg

Path to the image. The image should be located in the project’s _static folder.

link

string

getting-started

Relative link or external URL for the call to action. Do not use leading and trailing (“/”) symbols to define relative links. (e.g. instead of /getting-started/, use getting-started).

anchor

string

Getting Started >

Text for the call to action.

Usage

Topic with icon

Using:

.. topic-box::
    :title: Lorem Ipsum
    :icon: fa fa-github
    :link: #
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Results in:

Topic with image

Using:

.. topic-box::
    :title: Lorem Ipsum
    ::image: /_static/img/mascots/scylla-enterprise.svg
    :link: #
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Results in:

Topic with horizontal scroll (mobile)

Using:

.. raw:: html

    <div class="topics-grid topics-grid--scrollable grid-container full">

    <div class="grid-x grid-margin-x hs">

.. topic-box::
    :title: Lorem ipsum
    :link: scylla-cloud
    :class: large-4
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem ipsum
    :link: scylla-cloud
    :class: large-4
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem ipsum
    :link: scylla-cloud
    :class: large-4
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. raw:: html

    </div></div>

Results in:

Product topic

Using:

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Results in:

Topic grid

Create powerful, multi-device, topic box grids using Foundation’s 12-column grid system. To make the columns wider or smaller, you can use the option :class:. For example, :class: large-3 means that the topic box will take 3 out of 12 columns in desktop devices.

For more information, see The Grid System.

Using:

.. raw:: html

    <div class="topics-grid topics-grid--products">

        <h2 class="topics-grid__title">Lorem Ipsum</h2>
        <p class="topics-grid__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

        <div class="grid-container full">
            <div class="grid-x grid-margin-x">

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. raw:: html

    </div></div></div>

Results in: