wagtail-cjkcms 25.5.2__tar.gz → 25.8.2__tar.gz

{wagtail_cjkcms-25.5.2/wagtail_cjkcms.egg-info → wagtail_cjkcms-25.8.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: wagtail-cjkcms
-Version: 25.5.2
+Version: 25.8.2
 Summary: Wagtail Content Management System, installable as a Django app into any Wagtail 4.1.x/5.x/6.x site.
 Author-email: Grzegorz Krol <gk@cjk.pl>
 License: BSD-3-Clause

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/__init__.py

@@ -1,4 +1,4 @@
-VERSION = (25, 5, 2, "")
+VERSION = (25, 8, 2, "")
 
 __version_info__ = VERSION
 __version__ = ".".join(map(str, VERSION[:3])) + (f"-{VERSION[3]}" if VERSION[3] else "")

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/blocks/__init__.py

@@ -32,9 +32,12 @@ from .content_blocks import (  # noqa
     PriceListBlock,
     ReusableContentBlock,
     HighlightBlock,
+    IconWithTextBlock,
 )
 from .content.events import PublicEventBlock, EventCalendarBlock
 from .content.countdown import CountdownBlock
+from .content.multistep import MultiStepInstructionsBlock
+from .content.steps import StepsBlock
 from .layout_blocks import CardGridBlock, GridBlock, HeroBlock
 from cjkcms.settings import cms_settings
 
@@ -78,7 +81,10 @@ CONTENT_STREAMBLOCKS = HTML_STREAMBLOCKS + [
     ("reusable_content", ReusableContentBlock()),
     ("event_calendar", EventCalendarBlock()),
     ("highlight", HighlightBlock()),
+    ("icon_with_text", IconWithTextBlock()),
+    ("steps", StepsBlock()),
     ("countdown", CountdownBlock()),
+    ("multistep_instructions", MultiStepInstructionsBlock()),
 ]
 
 NAVIGATION_STREAMBLOCKS = [

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/blocks/base_blocks.py

@@ -188,11 +188,33 @@ class CjkcmsAdvSettings(blocks.StructBlock):
     # placeholder, real value get set in __init__()
     custom_template = blocks.Block()
 
+    force_theme = blocks.ChoiceBlock(
+        choices=[
+            (None, _("None")),
+            ("light", _("Light")),
+            ("dark", _("Dark")),
+        ],
+        default=None,
+        required=False,
+        label=_("Force Theme"),
+        help_text=_(
+            "Override the theme for this block, also adding bg-body and text-body classes."
+        ),
+    )
+
     custom_css_class = blocks.CharBlock(
         required=False,
         max_length=255,
         label=_("Custom CSS Class"),
     )
+
+    item_css_class = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Item CSS Class"),
+        help_text=_("Used for multi-item blocks, like galleries or lists."),
+    )
+
     custom_id = blocks.CharBlock(
         required=False,
         max_length=255,

wagtail_cjkcms-25.8.2/cjkcms/blocks/content/multistep.py

@@ -0,0 +1,92 @@
+from wagtail import blocks
+from wagtail.blocks import StructBlock, StreamBlock
+from cjkcms.blocks.html_blocks import ButtonBlock
+from cjkcms.blocks.base_blocks import BaseBlock
+from cjkcms.settings import cms_settings
+
+
+class BootstrapColorChoiceBlock(blocks.ChoiceBlock):
+
+    class Meta:
+        label = "Color"
+
+
+class InstructionBlock(StructBlock):
+    header = blocks.CharBlock(
+        label="Header",
+        required=False,
+    )
+
+    pill_label = blocks.CharBlock(
+        label="Pill button Label",
+        help_text="Used only in Vertical Pills layout",
+    )
+
+    content_1 = blocks.RichTextBlock(
+        icon="font",
+        features=cms_settings.CJKCMS_RICHTEXT_FEATURES["full"],
+        label="Content Section 1",
+        required=False,
+    )
+
+    content_2 = blocks.RichTextBlock(
+        icon="font",
+        features=cms_settings.CJKCMS_RICHTEXT_FEATURES["full"],
+        label="Content Section 2",
+        required=False,
+    )
+
+    buttons = StreamBlock(
+        [("button", ButtonBlock())],
+        label="Step Buttons",
+        required=False,
+        block_counts={"button": {"min_num": 0, "max_num": 3}},
+    )
+
+    class Meta:
+        icon = "plus"
+        label = "Step"
+        label_format = "{header} (Step)"
+
+
+class MultiStepInstructionsBlock(BaseBlock):
+    header = blocks.CharBlock(label="Headline", required=False)
+
+    layout = blocks.ChoiceBlock(
+        label="Layout",
+        choices=[
+            ("vertical_pills", "Vertical Pills"),
+            ("alternating_cards", "Alternating Cards"),
+        ],
+        default="alternating_cards",
+    )
+
+    alignment = blocks.ChoiceBlock(
+        label="Header & Buttons Alignment",
+        choices=[
+            ("left", "Left"),
+            ("right", "Right"),
+            ("center", "Center"),
+        ],
+        default="center",
+    )
+
+    # gutter size for content spacing, dropdown choices for intengers 0-5
+    content_gutter = blocks.ChoiceBlock(
+        label="Content Gutter Size",
+        choices=[(str(i), str(i)) for i in range(6)],
+        default="3",
+        help_text="Horizontal gutter size for content spacing, 0-5",
+    )
+
+    steps = StreamBlock(
+        [("step", InstructionBlock())],
+        label="Steps",
+        block_counts={"step": {"min_num": 1, "max_num": 10, "required": True}},
+    )
+
+    class Meta:
+        icon = "group"
+        label = "Multi Step Instructions"
+        label_format = "{header} (Multi Step Instructions)"
+        template = "cjkcms/blocks/multi_step_instructions.html"

wagtail_cjkcms-25.8.2/cjkcms/blocks/content/steps.py

@@ -0,0 +1,83 @@
+from django.utils.translation import gettext_lazy as _
+from wagtail import blocks
+
+from cjkcms.blocks.base_blocks import BaseBlock
+
+
+class StepItemBlock(blocks.StructBlock):
+    """A single step: icon and title (caption)."""
+
+    icon = blocks.CharBlock(required=True, label=_("Icon"))
+    title = blocks.CharBlock(required=True, max_length=255, label=_("Title"))
+    is_active = blocks.BooleanBlock(
+        required=False,
+        default=False,
+        label=_("Active"),
+        help_text=_("If active, the step will be highlighted."),
+    )
+
+    class Meta:
+        icon = "minus"
+        label = _("Step Item")
+        label_format = _("Step: {title}")
+
+
+class StepsColorSettingsBlock(blocks.StructBlock):
+    """
+    Color settings for the steps block.
+    """
+
+    icon_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Icon color"),
+    )
+    icon_border_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Icon border color"),
+    )
+    icon_background_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Icon background color"),
+    )
+
+    active_icon_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Active icon color"),
+    )
+    active_icon_border_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Active icon border color"),
+    )
+    active_icon_background_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Active icon background color"),
+    )
+
+    line_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Connector line color"),
+    )
+
+
+class StepsBlock(BaseBlock):
+    """Horizontal steps with connecting line."""
+
+    items = blocks.ListBlock(StepItemBlock(), label=_("Steps"))
+    color_settings = StepsColorSettingsBlock(
+        required=False,
+        label=_("Color settings"),
+        help_text=_("Hex/RGBA/CSS color. Leave blank to use default styles."),
+    )
+
+    class Meta:
+        icon = "list-ol"
+        label = _("Steps")
+        label_format = _("Steps: {items}")
+        template = "cjkcms/blocks/steps_block.html"

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/blocks/content_blocks.py

@@ -396,3 +396,51 @@ class HighlightBlock(BaseBlock):
         label = _("Highlight")
         label_format = _("Highlight")
         template = "cjkcms/blocks/highlight_block.html"
+
+
+class IconWithTextBlock(BaseBlock):
+    """Configurable block for an icon with optional statistic value, title and text.
+
+    Two layouts are supported:
+    - "stat": stacked, suitable for statistics (icon, big number, label/text)
+    - "media": icon on the left, content on the right (title, text)
+    """
+
+    icon = blocks.CharBlock(
+        required=True,
+        label=_("Icon"),
+    )
+    title = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Title"),
+    )
+    text = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Text"),
+    )
+    icon_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Icon color"),
+        help_text=_("Hex/RGBA/CSS color. Leave blank to use default styles."),
+    )
+    icon_background_color = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_("Icon background color"),
+        help_text=_("Hex/RGBA/CSS color. Leave blank to use default styles."),
+    )
+    layout = blocks.ChoiceBlock(
+        choices=[("horizontal", _("Horizontal")), ("vertical", _("Vertical"))],
+        default="horizontal",
+        required=False,
+        label=_("Layout"),
+    )
+
+    class Meta:
+        icon = "info-circle"
+        label = _("Icon with Text")
+        label_format = _("Icon with Text: {title}")
+        template = "cjkcms/blocks/icon_text_block.html"

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/project_template/basic/requirements.txt

@@ -1,4 +1,4 @@
 wagtail-cjkcms=={{cjkcms_version.0}}.{{cjkcms_version.1}}.*
 
 # To use with PostgreSQL, uncomment the line below:
-#psycopg2
+#psycopg

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/project_template/webpack/requirements.txt

@@ -2,7 +2,4 @@ wagtail-cjkcms=={{cjkcms_version.0}}.{{cjkcms_version.1}}.*
 python-webpack-boilerplate
 
 # To use with PostgreSQL, uncomment the line below:
-#psycopg2
-#
-#or for psycopg3: 
-#psycopg[binary]
+#psycopg

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/static/cjkcms/css/cjkcms-front.css

@@ -338,4 +338,4 @@ License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
   height: 0;
   width: 0;
   display: block;
-}
+}

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/templates/cjkcms/blocks/base_block.html

@@ -1,6 +1,7 @@
 <div class="{{self.settings.custom_css_class}}"
      {% if self.settings.custom_id %}
      id="{{self.settings.custom_id}}"
-     {% endif %} >
+     {% endif %}
+     >
 {% block block_render %}{% endblock %}
 </div>

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/templates/cjkcms/blocks/column_block.html

@@ -1,7 +1,12 @@
 {% load wagtailcore_tags %}
 
 <div {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}
-     class="col{% if self.settings.column_breakpoint %}-{{ self.settings.column_breakpoint }}{% endif %}{% if self.column_size %}-{{ self.column_size }}{% endif %} {{self.settings.custom_css_class}}">
+      {% if self.settings.force_theme %}
+          data-bs-theme="{{ self.settings.force_theme }}" data-mdb-theme="{{ self.settings.force_theme }}"
+      {% endif %}
+     class="col{% if self.settings.column_breakpoint %}-{{ self.settings.column_breakpoint }}{% endif %}{% if self.column_size %}-{{ self.column_size }}{% endif %} 
+     {{self.settings.custom_css_class}}
+     {% if self.settings.force_theme %} bg-body text-body{% endif %}">
       {% for block in self.content %}
       {% include_block block %}
       {% endfor %}

wagtail_cjkcms-25.8.2/cjkcms/templates/cjkcms/blocks/grid_block.html

@@ -0,0 +1,22 @@
+{% load wagtailcore_tags %}
+
+<div class="container{% if self.fluid %}-fluid{% endif %}"
+  {% if self.settings.custom_id %} id="{{self.settings.custom_id}}"{% endif %}    
+>
+  {% block grid_content %}
+  <div
+      {% if self.settings.force_theme %}
+        data-bs-theme="{{ self.settings.force_theme }}" data-mdb-theme="{{ self.settings.force_theme }}"
+    {% endif %}
+  
+  class="row {{self.settings.custom_css_class}}
+   {% if self.settings.force_theme %} bg-body text-body{% endif %}">
+      {% for column in self.content %}
+            {% include_block column %}
+      {% endfor %}
+  </div>
+  {% endblock %}
+
+</div>
+
+{% block custom_scripts %}{% endblock %}

{wagtail_cjkcms-25.5.2 → wagtail_cjkcms-25.8.2}/cjkcms/templates/cjkcms/blocks/hero_block.html

@@ -5,10 +5,15 @@
 {% endif %}
 
 {% image self.background_image max-2000x2000 as background_image %}
-<div class="hero-bg {% if self.is_parallax %}parallax{% endif %} {% if self.tile_image %}tile{% endif %} {{self.settings.custom_css_class}}"
+<div class="hero-bg position-relative {% if self.is_parallax %}parallax{% endif %} {% if self.tile_image %}tile{% endif %} {{self.settings.custom_css_class}}"
     style="{% if self.background_color %}background-color:{{self.background_color}};{% endif %}{% if background_image %}background-image:url({{background_image.url}});{% endif %}"
     {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
-    <div class="hero-fg" style="{% if self.foreground_color %}color:{{self.foreground_color}};{% endif %}">
+
+    {% if self.background_color and background_image %}
+        <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: {{self.background_color}};" aria-hidden="true"></div>
+    {% endif %}
+
+    <div class="hero-fg position-relative" style="{% if self.foreground_color %}color:{{self.foreground_color}};{% endif %}">
         {% include_block self.content %}
     </div>
 </div>

wagtail_cjkcms-25.8.2/cjkcms/templates/cjkcms/blocks/icon_text_block.html

@@ -0,0 +1,38 @@
+{% load wagtailcore_tags %}
+
+<style scoped>
+  {% if self.icon_background_color %}
+    .icon-text-{{block.id}} .icon-bg {
+      background: {{ self.icon_background_color }} !important;
+    }
+  {% endif %}
+  {% if self.icon_color %}
+    .icon-text-{{block.id}} .icon-color {
+      color: {{ self.icon_color }} !important;
+    }
+  {% endif %}
+</style>
+
+{% if self.layout == "horizontal" %}
+  <div class="icon-text-{{block.id}} d-flex align-items-start gap-3 {{ self.settings.custom_css_class }}" 
+    {% if self.settings.custom_id %}id="{{ self.settings.custom_id }}"{% endif %}
+  >
+    <div class="rounded d-inline-flex align-items-center justify-content-center p-3 icon-bg" style="aspect-ratio: 1/1;">
+      {% if self.icon %}<i class="{{ self.icon }} fs-1 fa-fw icon-color"></i>{% endif %}
+    </div>
+    {% if self.title %}<h3 class="fw-semibold fs-2 mb-0">{{ self.title }}</h3>{% endif %}
+    {% if self.text %}<p class="fs-5 fw-lighter mb-0">{{ self.text }}</p>{% endif %}
+  </div>
+{% else %}
+  <div class="icon-text-{{block.id}} text-center {{ self.settings.custom_css_class }}"
+    {% if self.settings.custom_id %}id="{{ self.settings.custom_id }}"{% endif %}
+  >
+    <div class="mx-auto mb-2 rounded d-inline-flex align-items-center justify-content-center p-3 bg-primary icon-bg" style="aspect-ratio: 1/1;">
+      {% if self.icon %}<i class="{{ self.icon }} fs-1 fa-fw text-white icon-color"></i>{% endif %}
+    </div>
+    {% if self.title %}<h3 class="fs-3 fw-bold lh-1 mb-0">{{ self.title }}</h3>{% endif %}
+    {% if self.text %}<p class="fs-6 fw-lighter mb-0">{{ self.text }}</p>{% endif %}
+  </div>
+{% endif %}
+
+

wagtail_cjkcms-25.8.2/cjkcms/templates/cjkcms/blocks/multi_step_instructions.html

@@ -0,0 +1,14 @@
+{% load wagtailcore_tags wagtailimages_tags cjkcms_tags static %}
+<div
+    {% if self.settings.force_theme %}
+        data-bs-theme="{{ self.settings.force_theme }}" data-mdb-theme="{{ self.settings.force_theme }}"
+    {% endif %}
+    class="multi_step_instructions {%if self.settings.custom_css_class%}{{self.settings.custom_css_class}}{% else %} p-2 m-2 {% endif %}
+    {% if self.settings.force_theme %} bg-body text-body{% endif %}">
+        {% if self.header %}
+        <h2 class="text-center py-2 fw-bolder">{{ self.header }}</h2>
+        {% endif %}
+        {% with "cjkcms/snippets/multistep/"|add:self.layout|add:".html" as layout_template %}
+            {% include layout_template %}
+        {% endwith %}
+</div>

wagtail_cjkcms-25.8.2/cjkcms/templates/cjkcms/blocks/steps_block.html

@@ -0,0 +1,130 @@
+{% load wagtailcore_tags %}
+
+<style>
+  .steps-container {
+    flex-direction: column;
+    width: fit-content;
+  }
+
+  .connecting-line {
+    width: 6px;
+    height: 50%;
+    background: {{ self.color_settings.line_color|default:'#F3F3F3' }};
+  }
+
+  .step-item {
+    display: flex;
+  }
+
+  .step-item-content {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: center;
+  }
+  
+  .connecting-line.before {
+    left: calc(50% - 3px);
+    top: 0;
+  }
+
+  @media (min-width: 768px) {
+    .steps-container {
+      flex-direction: row;
+      width: auto;
+    }
+
+    .connecting-line {
+      height: 6px;
+      top: calc(50% - 3px);
+      width: 50%;
+    }
+
+    .step-item {
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .step-item-content {
+      text-align: center;
+      flex-direction: column;
+    }
+
+    .connecting-line.after {
+      left: 50%;
+    }
+
+    .connecting-line.before {
+      left: 0;
+      top: auto;
+    }
+  }
+
+  /* Icon Color Settings */
+  {% if self.color_settings.icon_background_color %}
+    .steps-container-{{block.id}} .icon-bg:not(.active) {
+      background: {{ self.color_settings.icon_background_color }} !important;
+    }
+  {% endif %}
+  {% if self.color_settings.icon_border_color %}
+    .steps-container-{{block.id}} .icon-border:not(.active) {
+      border: 2px solid {{ self.color_settings.icon_border_color }} !important;
+    }
+  {% endif %}
+  {% if self.color_settings.icon_color %}
+    .steps-container-{{block.id}} .icon-color:not(.active) {
+      color: {{ self.color_settings.icon_color }} !important;
+    }
+  {% endif %}
+  /* Active Icon Color Settings */
+  {% if self.color_settings.active_icon_background_color %}
+    .steps-container-{{block.id}} .icon-bg.active {
+      background: {{ self.color_settings.active_icon_background_color }} !important;
+    }
+  {% endif %}
+  {% if self.color_settings.active_icon_border_color %}
+    .steps-container-{{block.id}} .icon-border.active {
+      border: 2px solid {{ self.color_settings.active_icon_border_color }} !important;
+    }
+  {% endif %}
+  {% if self.color_settings.active_icon_color %}
+    .steps-container-{{block.id}} .icon-color.active {
+      color: {{ self.color_settings.active_icon_color }} !important;
+    }
+  {% endif %}
+</style>
+
+<section class="position-relative fw-lighter {{ self.settings.custom_css_class }}" {% if self.settings.custom_id %}id="{{ self.settings.custom_id }}"{% endif %}>
+
+  <div class="container">
+    <ol class="steps-container-{{block.id}} d-flex ms-3 ms-lg-0 list-unstyled">
+      {% for item in self.items %}
+          <li class="step-item">
+
+            <div class="d-flex align-items-center justify-content-center position-relative">
+              {% if not forloop.first %}
+                <div class="connecting-line before position-absolute" aria-hidden="true"></div>
+              {% endif %}
+              {% if not forloop.last %}
+                <div class="connecting-line after d-none d-md-block position-absolute" aria-hidden="true"></div>
+              {% endif %}
+              <div class="rounded d-inline-flex align-items-center justify-content-center p-3 position-relative
+                  {% if item.is_active %}active bg-primary text-white{% else %}bg-white text-primary{% endif %} border border-2 border-primary icon-bg icon-border icon-color
+                  {% if not forloop.first %}mt-5 mt-md-0{% endif %}"
+                  style="aspect-ratio: 1/1;"
+              >
+                <i class="{{ item.icon }} fs-1 fa-fw" aria-label="{{ item.title }}" role="img"></i>
+              </div>
+            </div>
+
+            <div class="step-item-content ms-3 ms-md-0 {% if not forloop.first %}mt-5 mt-md-0{% endif %}">
+              <div class="mt-md-2">Step {{ forloop.counter }}</div>
+              <p class="fs-5 mb-0">{{ item.title }}</p>
+            </div>
+
+          </li>
+      {% endfor %}
+    </ol>
+  </div>
+</section>
+
+

wagtail_cjkcms-25.8.2/cjkcms/templates/cjkcms/snippets/multistep/alternating_cards.html

@@ -0,0 +1,28 @@
+{% load wagtailcore_tags wagtailimages_tags static %}
+
+{% for instruction in self.steps %}
+        <div class="row {%if self.settings.item_css_class%}{{self.settings.item_css_class}}{% else %}gx-4 gy-4 mb-4 border-bottom{% endif %}">
+            <div class="col-lg-6
+            {% if forloop.counter|divisibleby:2 %}order-last{% endif %}">
+                <h3 class="mb-2 
+                {% if self.alignment == "center" %}text-center
+                    {% elif self.alignment == "left" %}text-start
+                    {% else %}text-end{% endif %}
+                ">{{ instruction.value.header }}</h3>
+                <div class="content-instructions">
+                    {{ instruction.value.content_1|richtext }}
+                </div>
+                <div class="d-flex mb-2
+                {% if self.alignment == "center" %}justify-content-center
+                    {% elif self.alignment == "left" %}justify-content-start
+                    {% else %}justify-content-end{% endif %}">
+                {{ instruction.value.buttons }}
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="content-instructions">
+                    {{ instruction.value.content_2|richtext }}
+                </div>
+            </div>
+        </div>
+{% endfor %}

wagtail_cjkcms-25.8.2/cjkcms/templates/cjkcms/snippets/multistep/vertical_pills.html

@@ -0,0 +1,57 @@
+{% load wagtailcore_tags wagtailimages_tags static %}
+
+<div class="row {%if self.settings.item_css_class%}{{self.settings.item_css_class}}{% else %}gx-4 gy-4{% endif %}">
+    <div class="col-3">
+        <!-- Tab navs -->
+        <div
+                class="nav flex-column nav-pills text-center"
+                id="v-pills-tab"
+                role="tablist"
+                aria-orientation="vertical"
+        >
+            {% for instruction in self.steps %}
+                <a
+                        data-mdb-pill-init
+                        class="nav-link {% if forloop.first %}active{% endif %}"
+                        id="v-pills-{{ instruction.value.pill_label|slugify }}-tab"
+                        href="#vp-{{ instruction.value.pill_label|slugify }}"
+                        role="tab"
+                        aria-controls="vp-{{ instruction.value.pill_label|slugify }}"
+                        aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
+                >{{ instruction.value.pill_label }}</a>
+            {% endfor %}
+        </div>
+        <!-- Tab navs -->
+    </div>
+    <div class="col-9">
+        <!-- Tab content -->
+        <div class="tab-content" id="vp-content">
+            {% for instruction in self.steps %}
+                <div
+                        class="tab-pane fade show {% if forloop.first %}active{% endif %}"
+                        id="vp-{{ instruction.value.pill_label|slugify }}"
+                        role="tabpanel"
+                        aria-labelledby="vp-{{ instruction.value.pill_label|slugify }}-tab"
+                >
+                    <h3 class="
+                        {% if self.alignment == "center" %}text-center
+                        {% elif self.alignment == "left" %}text-start
+                        {% else %}text-end{% endif %}">{{ instruction.value.header }}</h3>
+                    <div class="content-instructions">
+                        {{ instruction.value.content_1|richtext }}
+                    </div>
+                    <div class="content-instructions">
+                        {{ instruction.value.content_2|richtext }}
+                    </div>
+                    <div class="d-flex
+                    {% if self.alignment == "center" %}justify-content-center
+                        {% elif self.alignment == "left" %}justify-content-start
+                        {% else %}justify-content-end{% endif %}">
+                    {{ instruction.value.buttons }}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+        <!-- Tab content -->
+    </div>
+</div>