Add qiskit-call-to-action-grid directive

README.md

@@ -187,7 +187,7 @@ docs_url_prefix = "ecosystem/finance"
 The `qiskit_sphinx_theme` extension defines the below custom directives for you to use in RST, if you'd like. See `example_docs/docs/sphinx_guide/custom_directives.rst` for examples of how to use them.
 
 * `qiskit-card`
-* `qiskit-call-to-action-item`
+* `qiskit-call-to-action-item` and `qiskit-call-to-action-grid`
 
 ![Screenshot of examples of custom directives](https://github.com/Qiskit/qiskit_sphinx_theme/assets/14852634/9c672417-6451-4547-bc36-10709f7f3880)
 

example_docs/docs/sphinx_guide/custom_directives.rst

@@ -5,42 +5,30 @@ Custom Directives
 qiskit-call-to-action-item
 ==========================
 
-.. raw:: html
+.. qiskit-call-to-action-grid::
 
-   <div class="tutorials-callout-container">
-      <div class="row">
+    .. qiskit-call-to-action-item::
+       :header: Go back to qiskit.org!
+       :description: That's a cool site too :)
+       :button_link:  https://qiskit.org
+       :button_text: qiskit.org
 
-.. qiskit-call-to-action-item::
-   :header: Go back to qiskit.org!
-   :description: That's a cool site too :)
-   :button_link:  https://qiskit.org
-   :button_text: qiskit.org
+    .. qiskit-call-to-action-item::
+       :header: CTA #2
+       :description: Call me, maybe?
+       :button_link:  https://qiskit.org
+       :button_text: qiskit.org
 
-.. qiskit-call-to-action-item::
-   :header: CTA #2
-   :description: Call me, maybe?
-   :button_link:  https://qiskit.org
-   :button_text: qiskit.org
-
-.. qiskit-call-to-action-item::
-   :header: CTA #3
-   :description: No really, call me!
-   :button_link:  https://qiskit.org
-   :button_text: qiskit.org
-
-.. raw:: html
-
-      </div>
-   </div>
+    .. qiskit-call-to-action-item::
+       :header: CTA #3
+       :description: No really, call me!
+       :button_link:  https://qiskit.org
+       :button_text: qiskit.org
 
 
 qiskit-card
 ===========
 
-..
-  Note: To get the `image` working locally, we have to use a relative link like `../`. In
-  production, it should simply be `_static/ibm_qlab.png.
-
 .. qiskit-card::
   :header: IBM Quantum Lab
   :card_description: Build quantum applications and experiments with Qiskit in a cloud programming environment.

src/qiskit_sphinx_theme/directives.py

@@ -24,7 +24,8 @@
 
 def setup(app: sphinx.application.Sphinx) -> None:
     app.add_directive(QiskitCardDirective.NAME, QiskitCardDirective)
-    app.add_directive(CallToActionItemDirective.NAME, CallToActionItemDirective)
+    app.add_directive(QiskitCallToActionItemDirective.NAME, QiskitCallToActionItemDirective)
+    app.add_directive(QiskitCallToActionGridDirective.NAME, QiskitCallToActionGridDirective)
 
 
 class QiskitCardDirective(Directive):
@@ -62,7 +63,7 @@ def run(self) -> list[nodes.paragraph]:
         return [card]
 
 
-class CallToActionItemDirective(Directive):
+class QiskitCallToActionItemDirective(Directive):
     NAME = "qiskit-call-to-action-item"
 
     option_spec = {
@@ -83,16 +84,27 @@ def run(self) -> list[nodes.paragraph]:
         callout_rst = f"""
 .. raw:: html
 
-    <div class="col-md-6">
-        <div class="text-container">
-            <h3>{header}</h3>
-            <p class="body-paragraph">{description}</p>
-            <a class="btn with-right-arrow callout-button" href="{button_link}">{button_text}</a>
-        </div>
+    <div class="qiskit-call-to-action-item">
+        <h3>{header}</h3>
+        <p>{description}</p>
+        <a href="{button_link}">{button_text}</a>
     </div>
 """
 
         callout_list = StringList(callout_rst.splitlines())
         callout = nodes.paragraph()
         self.state.nested_parse(callout_list, self.content_offset, callout)
         return [callout]
+
+
+class QiskitCallToActionGridDirective(Directive):
+    NAME = "qiskit-call-to-action-grid"
+
+    has_content = True
+
+    def run(self) -> list[nodes.Element]:
+        outer_div_open = nodes.raw("", '<div class="qiskit-call-to-action-grid">', format="html")
+        outer_div_close = nodes.raw("", "</div>", format="html")
+        node = nodes.Element()
+        self.state.nested_parse(self.content, self.content_offset, node)
+        return [outer_div_open, *node, outer_div_close]

src/qiskit_sphinx_theme/pytorch/static/css/theme.css

@@ -11668,23 +11668,31 @@ div.qiskit-card:hover .qiskit-card-image-container {
 * qiskit-call-to-action
 * ------------------------------------------------------------------------------- */
 
-article.pytorch-article .tutorials-callout-container {
+.qiskit-call-to-action-grid  {
   padding-bottom: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
 }
-article.pytorch-article .tutorials-callout-container .col-md-6 {
-  padding-bottom: 10px;
-}
-article.pytorch-article .tutorials-callout-container .text-container {
-  padding: 10px 0px 30px 0px;
-  padding-bottom: 10px;
+
+.qiskit-call-to-action-item {
+  flex: 0 0 50%;
+  max-width: 50%;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding: 10px 15px 20px 15px;
 }
-article.pytorch-article .tutorials-callout-container .text-container .body-paragraph {
+
+div.qiskit-call-to-action-item p {
   color: #666666;
   font-weight: 300;
   font-size: 1.125rem;
   line-height: 1.875rem;
 }
-article.pytorch-article .tutorials-callout-container .btn.callout-button {
+
+.qiskit-call-to-action-item a {
   font-size: 1.125rem;
   border-radius: 0;
   border: none;
@@ -11693,28 +11701,39 @@ article.pytorch-article .tutorials-callout-container .btn.callout-button {
   font-weight: 400;
   position: relative;
   letter-spacing: 0.25px;
+
+  background-size: 8px 14px;
+  background-position: center right 12px;
+  background-image: url("../images/chevron-right-purple.svg");
+  background-repeat: no-repeat;
+
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  padding: 0.375rem 0.75rem;
+  padding-right: 2em;
+  line-height: 1.5;
 }
-@media screen and (min-width: 768px) {
-  article.pytorch-article .tutorials-callout-container .btn.callout-button:after {
-    content: "";
-    display: block;
-    width: 0;
-    height: 1px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background-color: #8B34FC;
-    -webkit-transition: width .250s ease-in-out;
-    transition: width .250s ease-in-out;
-  }
-  article.pytorch-article .tutorials-callout-container .btn.callout-button:hover:after {
-    width: 100%;
-  }
+
+.qiskit-call-to-action-item a::after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: #8B34FC;
+  transition: width .250s ease-in-out;
 }
-article.pytorch-article .tutorials-callout-container .btn.callout-button a {
-  color: inherit;
+
+.qiskit-call-to-action-item a:hover::after {
+  width: 100%;
 }
 
+
 .pytorch-container {
   margin: 0 auto;
   padding: 0 1.875rem;