DIA Frontend

Panel 

<!-- ### Begin: Element panel ### -->
    <div id="c230" class="frame frame-default frame-type-panel 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">
                <div class="card card-panel card-panel-default">
                    <h1 class="card-header">Panel - Default</h1>
                    <div class="card-body">
                        Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element panel ### -->

    <!-- ### Begin: Element panel ### -->
    <div id="c585" class="frame frame-default frame-type-panel 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">
                <div class="card card-panel card-panel-primary">
                    <h2 class="card-header">Panel - Primary</h2>
                    <div class="card-body">
                        Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element panel ### -->

    <!-- ### Begin: Element panel ### -->
    <div id="c558" class="frame frame-default frame-type-panel 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">
                <div class="card card-panel card-panel-success">
                    <h2 class="card-header">Panel - Success</h2>
                    <div class="card-body">
                        Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element panel ### -->

    <!-- ### Begin: Element panel ### -->
    <div id="c222" class="frame frame-default frame-type-panel 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">
                <div class="card card-panel card-panel-info">
                    <h2 class="card-header">Panel - Info</h2>
                    <div class="card-body">
                        Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element panel ### -->

    <!-- ### Begin: Element panel ### -->
    <div id="c874" class="frame frame-default frame-type-panel 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">
                <div class="card card-panel card-panel-warning">
                    <h2 class="card-header">Panel - Warning</h2>
                    <div class="card-body">
                        Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element panel ### -->

    <!-- ### Begin: Element panel ### -->
    <div id="c542" class="frame frame-default frame-type-panel 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">
                <div class="card card-panel card-panel-danger">
                    <h2 class="card-header">Panel - Danger</h2>
                    <div class="card-body">
                        Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element panel ### -->
 
{% for variant in variants %}
    {% include '@frame-panel' with variant %}
{% endfor %}
 
{
  "variants": [
    {
      "header": "Panel - Default",
      "header_layout": 1,
      "panel_class": "default",
      "bodytext": "Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.\n"
    },
    {
      "header": "Panel - Primary",
      "panel_class": "primary",
      "space_after_class": "none",
      "space_before_class": "none",
      "bodytext": "Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.\n"
    },
    {
      "header": "Panel - Success",
      "panel_class": "success",
      "space_after_class": "none",
      "space_before_class": "none",
      "bodytext": "Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.\n"
    },
    {
      "header": "Panel - Info",
      "panel_class": "info",
      "space_after_class": "none",
      "space_before_class": "none",
      "bodytext": "Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.\n"
    },
    {
      "header": "Panel - Warning",
      "panel_class": "warning",
      "space_after_class": "none",
      "space_before_class": "none",
      "bodytext": "Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.\n"
    },
    {
      "header": "Panel - Danger",
      "panel_class": "danger",
      "bodytext": "Sed semper orci non elementum condimentum. Fusce at urna consectetur, sodales dolor accumsan, convallis neque. Mauris varius urna vel facilisis laoreet. Nulla cursus consequat vehicula. Donec dignissim, augue sit amet dapibus interdum, odio eros laoreet mi, id egestas dui felis eget tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis efficitur finibus. Nulla facilisi.\n"
    }
  ]
}

No notes defined.