Was this page helpful?
Caution
You're viewing documentation for a previous version of ScyllaDB Sphinx Theme. Switch to the latest stable version.
Hero box¶
A custom directive to create a header on the root index.rst file.
Warning
Do not use the hero-box on the subordinate index.rst files.
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 next to the button. |
|
|
string |
fa fa-home |
A list of CSS classes to render an icon, separated by comma or space. |
|
|
string |
left |
Position of the icon in relation to the text. Available values: |
|
|
flag |
If set, applies the CTA color to the icon. |
||
|
string |
Lorem ipsum |
Text for the call to action. |
|
|
string |
bold |
Apply specific style to the button. Available values: |
|
|
string |
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 |
||
|
string |
/_static/img/mascots/scylla-enterprise.svg |
Path to the image. The image should be located in the project’s |
|
|
flag |
If set, displays the site’s search box. |
Usage¶
Default¶
Using:
.. hero-box::
:title: Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Hero box with image¶
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots/scylla-enterprise.svg
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Hero box with search box¶
Using:
.. hero-box::
:title: Lorem Ipsum
:search_box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Hero box with button¶
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots/scylla-enterprise.svg
:button_url: #
:button_text: Project Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Hero box with button & icon¶
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots/scylla-enterprise.svg
:button_url: #
:button_icon: fa fa-github
:button_text: Project Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Hero box with button & icon (position right)¶
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots/scylla-enterprise.svg
:button_url: #
:button_icon: fa fa-github
:button_icon_position: right
:button_text: Project Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Hero box with everything¶
.. hero-box::
:title: Lorem ipsum
:image: /_static/img/mascots/scylla-enterprise.svg
:button_text: Project Name
:button_url: #
:button_style: bold
:button_icon: fa fa-github
:button_icon_position: right
:button_icon_link:
:cta: Learn more
:search_box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in: