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 Hero box

Caution

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

Hero box¶

A custom directive that creates prominent header sections at the top of landing.

Syntax¶

.. hero-box::
   <options>

   <text>

Options¶

The hero-box directive supports the following options:

Option

Type

Required

Example Value

Description

title

string

Lorem ipsum

Hero box title.

class

string

Custom CSS class.

cta

string

Learn more

Call to action text.

image

string

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

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

button_style

string

bold

Button style. Available values: bold.

button_icon

string

icon-github

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

button_icon_position

string

right

Icon position. Available values: left, right.

button_icon_link

flag

If present, the icon will be rendered as a link.

button_url

string

getting-started

Relative link or external URL for the call to action.

button_text

string

Learn more

Button text.

search_box

flag

If present, a search box will be rendered.

content_page

flag

If present, adds vertical padding suitable for content pages. By default (without this flag), the hero box is optimized for landing pages.

Link resolution¶

The hero-box directive handles different types of links:

  1. External links (e.g. https://example.com)

  2. Internal links with different path formats: * Absolute paths (e.g. /getting-started/installation) * Relative paths (e.g. code-blocks) * Parent directory references (e.g. ../getting-started) * Index files (e.g. index)

Examples:

# External link
.. hero-box::
    :title: External Resources
    :text: Visit our website for more information
    :button_text: Learn more
    :button_url: https://scylladb.com
    :button_icon: icon-external-link
    :button_icon_position: right

# Internal link (absolute)
.. hero-box::
    :title: Getting Started
    :text: Learn how to install and configure ScyllaDB
    :button_text: Learn more
    :button_url: /getting-started/installation
    :button_icon: icon-arrow-right
    :button_icon_position: right

# Internal link (relative)
.. hero-box::
    :title: Code blocks
    :text: Learn how to install and configure ScyllaDB
    :button_text: Learn more
    :button_url:code-blocks
    :button_icon: icon-arrow-right
    :button_icon_position: right

# Internal link (relative)
.. hero-box::
    :title: Related Topics
    :text: Check out these related guides
    :button_text: Learn more
    :button_url: ../getting-started/installation
    :button_icon: icon-folder
    :button_icon_position: left

Usage¶

Basic usage¶

Using:

.. hero-box::
    :title: Lorem Ipsum
    :text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    :button_text: Learn more
    :button_url: #
    :button_icon: icon-arrow-right
    :button_icon_position: right
    :content_page:

Results in:

Lorem Ipsum

With image¶

Using:

.. hero-box::
    :title: Lorem Ipsum
    :text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    :image: /_static/img/mascots-2/enterprise.svg
    :button_text: Learn more
    :button_url: #
    :button_icon: icon-arrow-right
    :button_icon_position: right
    :content_page:

Results in:

Lorem Ipsum

With search box¶

Using:

.. hero-box::
    :title: Lorem Ipsum
    :text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    :search_box:
    :content_page:

Results in:

Lorem Ipsum

With bold button¶

Using:

.. hero-box::
    :title: Lorem Ipsum
    :text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    :button_text: Learn more
    :button_url: #
    :button_icon: icon-arrow-right
    :button_icon_position: right
    :button_style: bold
    :content_page:

Results in:

Lorem Ipsum

With icon as link¶

Using:

.. hero-box::
    :title: Lorem Ipsum
    :text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    :button_text: Learn more
    :button_url: #
    :button_icon: icon-arrow-right
    :button_icon_position: right
    :button_icon_link:
    :content_page:

Results in:

Lorem Ipsum

Was this page helpful?

PREVIOUS
Headings
NEXT
Icons
  • Create an issue
  • Edit this page

On this page

  • Hero box
    • Syntax
    • Options
    • Link resolution
    • Usage
      • Basic usage
      • With image
      • With search box
      • With bold button
      • With icon as link
ScyllaDB Sphinx Theme
  • master
    • 1.8
    • 1.7
    • 1.6
    • 1.5
    • 1.4
    • 1.3
    • 1.2
    • 1.1
  • Getting started
    • Toolchain
    • Installation
    • Quickstart
  • Configuration
    • Template options
    • Page options
    • Multiversion options
    • Markdown support
    • Redirects support
    • AI chatbot support (beta)
    • Search support
    • Dependabot support
  • Commands
  • Deployment
    • Production deployment
    • Pull requests previews
    • Centralized publication
  • Examples
    • Admonitions
    • Alert
    • Collapse
    • Code blocks
    • Diagrams
    • Grid
    • Glossary
    • Headings
    • Hero box
    • Icons
    • Images
    • Includes
    • Labels
    • Links
    • Lists
    • Mascots
    • Panel box
    • Substitutions
    • Tables
    • Tabs
    • Text
    • TOC
    • Tooltips
    • Topic box
    • Versions
  • Upgrade guides
    • Upgrading from 1.7 to 1.8
    • Upgrading from 1.6 to 1.7
    • Upgrading from 1.5 to 1.6
    • Upgrading from 1.4 to 1.5
    • Upgrading from 1.3 to 1.4
    • Upgrading from 1.2 to 1.3
    • Upgrading from 1.1 to 1.2
    • Upgrading from 1.0 to 1.1
    • Upgrading 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.
Powered by Sphinx 7.4.7 & ScyllaDB Theme 1.8.6
Ask AI