Extend hero box (#1058)

docs/source/examples/hero-box.rst

@@ -39,16 +39,36 @@ The ``hero-box`` directive supports the following options:
     -
     -
     - Custom CSS class.
+  * - ``cta``
+    - string
+    -
+    - Learn more
+    - Call to action text next to the button.
   * - ``button_icon``
     - string
     -
     - fa fa-home
     - A list of CSS classes to render an icon, separated by comma or space.
+  * - ``button_icon_position``
+    - string
+    -
+    - left
+    - Position of the icon in relation to the text. Available values: ``left``, ``right``. Defaults to ``left``.
+  * - ``button_icon_link``
+    - flag
+    -
+    -
+    - If set, applies the CTA color to the icon.
   * - ``button text``
     - string
     -
     - Lorem ipsum
     - Text for the call to action.
+  * - ``button_style``
+    - string
+    -
+    - bold
+    - Apply specific style to the button. Available values: ``default``, ``bold``. Defaults to ``default``.
   * - ``button_url``
     - string
     -
@@ -139,8 +159,61 @@ 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::
+    :title: Lorem Ipsum
+    :image: /_static/img/mascots/scylla-enterprise.svg
+    :button_url: #
+    :button_text: Project Name
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Hero box with button & icon
+...........................
+
+Using:
+
+.. code-block:: rst
+
+    .. 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::
+    :title: Lorem Ipsum
+    :image: /_static/img/mascots/scylla-enterprise.svg
+    :button_icon: fa fa-github
+    :button_url: #
+    :button_text: Project Name
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Hero box with button & icon (position right)
+............................................
+
+Using:
+
+.. code-block:: rst
+
+    .. 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.
@@ -151,7 +224,120 @@ Results in:
     :title: Lorem Ipsum
     :image: /_static/img/mascots/scylla-enterprise.svg
     :button_icon: fa fa-github
+    :button_icon_position: right
     :button_url: #
     :button_text: Project Name
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+Hero box with bold button
+.........................
+
+Using:
+
+.. code-block:: rst
+
+  .. hero-box::
+      :title: Lorem ipsum
+      :button_text: Project Name
+      :button_url: #
+      :button_style: bold
+
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Results in:
+
+.. hero-box::
+    :title: Lorem ipsum
+    :button_text: Project Name
+    :button_url: #
+    :button_style: bold
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Hero with colored button
+........................
+
+Using:
+
+.. code-block:: rst
+
+  .. hero-box::
+      :title: Lorem ipsum
+      :button_text: Project Name
+      :button_url: #
+      :button_icon_link:
+
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Results in:
+
+.. hero-box::
+    :title: Lorem ipsum
+    :button_text: Project Name
+    :button_url: #
+    :button_icon_link:
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Hero box button with CTA
+........................
+
+Using:
+
+.. code-block:: rst
+
+  .. hero-box::
+      :title: Lorem ipsum
+      :button_text: Project Name
+      :button_url: #
+      :cta: Learn more
+
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Results in:
+
+.. hero-box::
+    :title: Lorem ipsum
+    :button_text: Project Name
+    :button_url: #
+    :cta: Learn more
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+Hero box with everything
+........................
+
+.. code-block:: rst
+
+  .. 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:
+
+.. 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-arrow-right
+    :button_icon_position: right
+    :button_icon_link:
+    :cta: Learn more
+    :search_box:
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.