DIA Frontend

Spacings 

<!-- ### Begin: Element text ### -->
<div id="c777" class="frame frame-default frame-type-text frame-layout-0 frame-background-primary frame-no-backgroundimage frame-space-before-none frame-space-after-small frame-space-inner-before-extra-small frame-space-inner-after-extra-small">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Inner Spacing extra-small
                </h2>
            </header>
            Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?
            Aliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.
            Nullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

<!-- ### Begin: Element text ### -->
<div id="c534" class="frame frame-default frame-type-text frame-layout-0 frame-background-secondary frame-no-backgroundimage frame-space-before-none frame-space-after-small frame-space-inner-before-small frame-space-inner-after-small">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Inner Spacing small
                </h2>
            </header>
            Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?
            Aliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.
            Nullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

<!-- ### Begin: Element text ### -->
<div id="c766" class="frame frame-default frame-type-text frame-layout-0 frame-background-primary frame-no-backgroundimage frame-space-before-none frame-space-after-small frame-space-inner-before-medium frame-space-inner-after-medium">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Inner Spacing medium
                </h2>
            </header>
            Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?
            Aliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.
            Nullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

<!-- ### Begin: Element text ### -->
<div id="c606" class="frame frame-default frame-type-text frame-layout-0 frame-background-secondary frame-no-backgroundimage frame-space-before-none frame-space-after-small frame-space-inner-before-large frame-space-inner-after-large">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Inner Spacing large
                </h2>
            </header>
            Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?
            Aliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.
            Nullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

<!-- ### Begin: Element text ### -->
<div id="c782" class="frame frame-default frame-type-text frame-layout-0 frame-background-primary frame-no-backgroundimage frame-space-before-none frame-space-after-small frame-space-inner-before-extra-large frame-space-inner-after-extra-large">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Inner Spacing extra-large
                </h2>
            </header>
            Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?
            Aliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.
            Nullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->
 
{% import "@macro-render" as render %}

{% block main %}
    {{ render.frames(frame) }}
{% endblock %}
 
{
  "frame": [
    {
      "type": "text",
      "context": {
        "space_after_class": "small",
        "space_inner_after_class": "extra-small",
        "space_inner_before_class": "extra-small",
        "header": "Inner Spacing extra-small",
        "background_color_class": "primary",
        "bodytext": "Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?\nAliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.\nNullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?\n"
      }
    },
    {
      "type": "text",
      "context": {
        "space_after_class": "small",
        "space_inner_after_class": "small",
        "space_inner_before_class": "small",
        "header": "Inner Spacing small",
        "background_color_class": "secondary",
        "bodytext": "Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?\nAliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.\nNullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?\n"
      }
    },
    {
      "type": "text",
      "context": {
        "space_after_class": "small",
        "space_inner_after_class": "medium",
        "space_inner_before_class": "medium",
        "header": "Inner Spacing medium",
        "background_color_class": "primary",
        "bodytext": "Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?\nAliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.\nNullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?\n"
      }
    },
    {
      "type": "text",
      "context": {
        "space_after_class": "small",
        "space_inner_after_class": "large",
        "space_inner_before_class": "large",
        "header": "Inner Spacing large",
        "background_color_class": "secondary",
        "bodytext": "Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?\nAliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.\nNullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?\n"
      }
    },
    {
      "type": "text",
      "context": {
        "space_after_class": "small",
        "space_inner_after_class": "extra-large",
        "space_inner_before_class": "extra-large",
        "header": "Inner Spacing extra-large",
        "background_color_class": "primary",
        "bodytext": "Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit?\nAliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra.\nNullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?\n"
      }
    }
  ]
}

No notes defined.