Frames

Ready

HTML
View
Context
Info
Notes


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

            <header class="frame-header">
                <h1 class="element-header">
                    Content-specific Layouts
                </h1>
            </header>
            Frames are centrally configured layouts for different content elements. Frames can be used, for example,
            to allow a content editor to apply a specific background image and/or color to specific content elements
            throughout the website.
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

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

            <header class="frame-header">
                <h2 class="element-header">
                    Ruler before
                </h2>
            </header>
            You can set a rulers before or after each content element.
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

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

            <header class="frame-header">
                <h2 class="element-header">
                    Ruler after
                </h2>
            </header>
            Here the ruler is positioned after the element.
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

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

            <header class="frame-header">
                <h2 class="element-header">
                    Ruler after coloured
                </h2>
            </header>
            Here the ruler is positioned after the element.
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

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

            <header class="frame-header">
                <h2 class="element-header">
                    Ruler before coloured
                </h2>
            </header>
            You can set a rulers before or after each content element.
        </div>
    </div>
</div>
<!-- ### End: Element text ### -->

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

            <header class="frame-header">
                <h2 class="element-header">
                    Indent
                </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="c331" class="frame frame-indent-left frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Indent, 33/66%
                </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="c596" class="frame frame-indent-right frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Indent, 66/33%
                </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="c581" class="frame frame-default frame-type-text frame-layout-0 frame-background-light frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Coloured Backgrounds (Light)
                </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="c189" class="frame frame-default frame-type-text frame-layout-0 frame-background-dark frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Coloured Backgrounds (Dark)
                </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="c803" class="frame frame-default frame-type-text frame-layout-0 frame-background-primary frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Coloured Backgrounds (Primary)
                </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="c96" class="frame frame-default frame-type-text frame-layout-0 frame-background-primary frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h3 class="element-header">
                    If the same backgrounds follow each other, the distance between the elements is reduced.
                </h3>
            </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="c129" class="frame frame-default frame-type-text frame-layout-0 frame-background-secondary frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Coloured Backgrounds (Secondary)
                </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="c982" class="frame frame-default frame-type-text frame-layout-0 frame-background-dark frame-has-backgroundimage frame-space-before-medium frame-space-after-none">
    <div class="frame-backgroundimage-container">
        <div class="frame-backgroundimage" style="background-image: url(../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg)"></div>
    </div>
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Background Image (Simple)
                </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="c862" class="frame frame-default frame-type-text frame-layout-0 frame-background-dark frame-has-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-backgroundimage-container">
        <div class="frame-backgroundimage frame-backgroundimage-blur" style="background-image: url(../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg)"></div>
    </div>
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Background Image (Blur)
                </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="c371" class="frame frame-default frame-type-text frame-layout-0 frame-background-dark frame-has-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-backgroundimage-container">
        <div class="frame-backgroundimage frame-backgroundimage-fade" style="background-image: url(../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg)"></div>
    </div>
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Background Image (Fade)
                </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": {
        "header": "Content-specific Layouts",
        "header_layout": 1,
        "bodytext": "Frames are centrally configured layouts for different content elements. Frames can be used, for example,\nto allow a content editor to apply a specific background image and/or color to specific content elements\nthroughout the website.\n"
      }
    },
    {
      "type": "text",
      "context": {
        "frame_class": "ruler-before",
        "header": "Ruler before",
        "bodytext": "You can set a rulers before or after each content element."
      }
    },
    {
      "type": "text",
      "context": {
        "frame_class": "ruler-after",
        "header": "Ruler after",
        "bodytext": "Here the ruler is positioned after the element."
      }
    },
    {
      "type": "text",
      "context": {
        "frame_class": "ruler-after",
        "background_color_class": "primary",
        "header": "Ruler after coloured",
        "bodytext": "Here the ruler is positioned after the element."
      }
    },
    {
      "type": "text",
      "context": {
        "frame_class": "ruler-before",
        "background_color_class": "primary",
        "header": "Ruler before coloured",
        "bodytext": "You can set a rulers before or after each content element."
      }
    },
    {
      "type": "text",
      "context": {
        "frame_class": "indent",
        "header": "Indent",
        "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": {
        "frame_class": "indent-left",
        "header": "Indent, 33/66%",
        "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": {
        "frame_class": "indent-right",
        "header": "Indent, 66/33%",
        "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": {
        "header": "Coloured Backgrounds (Light)",
        "background_color_class": "light",
        "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": {
        "header": "Coloured Backgrounds (Dark)",
        "background_color_class": "dark",
        "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": {
        "header": "Coloured Backgrounds (Primary)",
        "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": {
        "header": "If the same backgrounds follow each other, the distance between the elements is reduced.",
        "header_layout": 3,
        "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": {
        "header": "Coloured Backgrounds (Secondary)",
        "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_before_class": "medium",
        "header": "Background Image (Simple)",
        "background_color_class": "dark",
        "background_image": "../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg",
        "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": {
        "header": "Background Image (Blur)",
        "background_color_class": "dark",
        "background_image": "../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg",
        "background_class": "blur",
        "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": {
        "header": "Background Image (Fade)",
        "background_color_class": "dark",
        "background_image": "../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg",
        "background_class": "fade",
        "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"
      }
    }
  ]
}

Handle: @variants-frames
Preview:
- With layout
- Component only
Filesystem Path: ../template/components/03-typo3/variants/frames/frames.twig
References (1): @macro-render

No notes defined.