Was this page helpful?
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 |
|---|---|---|---|---|
|
string |
Lorem ipsum |
Hero box title. |
|
|
string |
Custom CSS class. |
||
|
string |
Learn more |
Call to action text. |
|
|
string |
/_static/img/mascots-2/enterprise.svg |
Path to the image. The image should be located in the project’s |
|
|
string |
bold |
Button style. Available values: bold. |
|
|
string |
icon-github |
A list of CSS classes to render icons, separated by comma or space. |
|
|
string |
right |
Icon position. Available values: left, right. |
|
|
flag |
If present, the icon will be rendered as a link. |
||
|
string |
getting-started |
Relative link or external URL for the call to action. |
|
|
string |
Learn more |
Button text. |
|
|
flag |
If present, a search box will be rendered. |
||
|
flag |
If present, adds vertical padding suitable for content pages. By default (without this flag), the hero box is optimized for landing pages. |
||
|
string |
my-chatbot-id |
AI chatbot ID to use for the Ask AI button. Requires the |
Link resolution¶
The hero-box directive handles different types of links:
External links (e.g. https://example.com)
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:
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:
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 custom AI chatbot ID¶
Using:
.. hero-box::
:title: Lorem Ipsum
:text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
:search_box:
:ai_chatbot_id: my-custom-chatbot-id
: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: