ScyllaDB University Live | Free Virtual Training Event
Learn more
ScyllaDB Documentation Logo Documentation
  • Server
  • Cloud
  • Tools
    • ScyllaDB Manager
    • ScyllaDB Monitoring Stack
    • ScyllaDB Operator
  • Drivers
    • CQL Drivers
    • DynamoDB Drivers
  • Resources
    • ScyllaDB University
    • Community Forum
    • Tutorials
Download
ScyllaDB Docs ScyllaDB Sphinx Theme Examples Topic box

Caution

You're viewing documentation for a previous version of ScyllaDB Sphinx Theme. Switch to the latest stable version.

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

Lorem ipsum

Topic box title.

class

string

Custom CSS class.

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:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

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:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

Topic with external link¶

Using:

.. topic-box::
    :title: Lorem Ipsum
    :link: https://scylladb.com
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Results in:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

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:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

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:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Was this page helpful?

PREVIOUS
TOC
NEXT
Versions
  • Create an issue
  • Edit this page

On this page

  • Topic box
    • Syntax
    • Options
    • Usage
      • Topic with icon
      • Topic with image
      • Topic with external link
      • Topic with horizontal scroll (mobile)
      • Product topic
      • Topic grid
ScyllaDB Sphinx Theme
  • 1.2
    • 1.8
    • 1.7
    • 1.6
    • 1.5
    • 1.4
    • 1.3
    • 1.2
    • 1.1
  • Getting started
    • Toolchain
    • Installation
  • Configuration
    • Template options
    • Page options
    • Multiversion options
    • Markdown support
    • Redirections support
    • Search support
    • Troubleshooting
  • Commands
  • Deployment
    • Production deployment
    • Pull requests previews
  • Examples
    • Admonitions
    • Collapse
    • Code blocks
    • Glossary
    • Headings
    • Hero box
    • Includes
    • Images
    • Links
    • Lists
    • Panel box
    • Substitutions
    • Tables
    • Tabs
    • Text
    • TOC
    • Topic box
    • Versions
  • Upgrade guides
    • Migrating from 1.1 to 1.2
    • Migrating from 1.0 to 1.1
    • Migrating from 0.x to 1.0
    • Changelog
  • Contribute
    • Contribute to the documentation
    • Contribute to the theme
    • Source Code
Docs Tutorials University Contact Us About Us
© 2025 ScyllaDB | Terms of Service | Privacy Policy | ScyllaDB, and ScyllaDB Cloud, are registered trademarks of ScyllaDB, Inc.
Last updated on 01 Apr 2025.
Powered by Sphinx 7.4.7 & ScyllaDB Theme 1.8.6
Ask AI