Was this page helpful?
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.
.. hero-box::
<options>
<text>
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 |
icon-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-2/enterprise.svg |
Path to the image. The image should be located in the project’s |
|
|
flag |
If set, displays the site’s search box. |
Using:
.. hero-box::
:title: Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots-2/enterprise.svg
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Using:
.. hero-box::
:title: Lorem Ipsum
:search_box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots-2/enterprise.svg
:button_url: #
:button_text: Project Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots-2/enterprise.svg
:button_url: #
:button_icon: icon-github
:button_text: Project Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Using:
.. hero-box::
:title: Lorem Ipsum
:image: /_static/img/mascots-2/enterprise.svg
:button_url: #
:button_icon: icon-github
:button_icon_position: right
:button_text: Project Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
.. hero-box::
:title: Lorem ipsum
:image: /_static/img/mascots-2/enterprise.svg
:button_text: Project Name
:button_url: #
:button_style: bold
:button_icon: icon-arrow-right
:button_icon_position: right
:button_icon_link:
:cta: Learn more
:search_box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Results in:
Was this page helpful?