<!-- ### Begin: Element text ### -->
<div id="c60" 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">
<h2 class="element-header">
Multicolumn
</h2>
</header>
Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Etiam rhoncus. Vestibulum ullamcorper mauris at
ligula. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent porttitor, nulla vitae posuere
iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.Quisque id mi. Nullam quis ante. In ac felis quis
tortor malesuada pretium.Nulla facilisi. Donec posuere vulputate arcu. Nunc nulla. Quisque ut nisi. Ut id nisl
quis enim dignissim sagittis.Phasellus viverra nulla ut metus varius laoreet. Donec mi odio, faucibus at
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c893" 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">
<h2 class="element-header">
Boxed Content
</h2>
</header>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec interdum, metus et
hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.</p>
<div class="well">
<p>Nullam cursus lacinia erat. In auctor lobortis lacus. Vivamus consectetuer hendrerit lacus. Pellentesque
commodo eros a enim. Suspendisse feugiat.</p>
</div>
<p>Praesent vestibulum dapibus nibh. Fusce fermentum. Suspendisse pulvinar, augue ac venenatis condimentum, sem
libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c67" 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">
<h2 class="element-header">
Indented Blocks
</h2>
</header>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec interdum, metus et
hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.</p>
<div class="text-indent">
<p>Nullam cursus lacinia erat. In auctor lobortis lacus. Vivamus consectetuer hendrerit lacus. Pellentesque
commodo eros a enim. Suspendisse feugiat.</p>
</div>
<p>Praesent vestibulum dapibus nibh. Fusce fermentum. Suspendisse pulvinar, augue ac venenatis condimentum, sem
libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c237" 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">
<h2 class="element-header">
Buttons
</h2>
</header>
<ul class="list-inline">
<li><a href="#" class="btn btn-default">Default</a></li>
<li><a href="#" class="btn btn-primary">Primary</a></li>
<li><a href="#" class="btn btn-secondary">Secondary</a></li>
<li><a href="#" class="btn btn-info">Info</a></li>
<li><a href="#" class="btn btn-warning">Warning</a></li>
<li><a href="#" class="btn btn-success">Success</a></li>
<li><a href="#" class="btn btn-danger">Danger</a></li>
</ul>
<ul class="list-inline">
<li><a href="#" class="btn btn-outline-default">Default</a></li>
<li><a href="#" class="btn btn-outline-primary">Primary</a></li>
<li><a href="#" class="btn btn-outline-secondary">Secondary</a></li>
<li><a href="#" class="btn btn-outline-info">Info</a></li>
<li><a href="#" class="btn btn-outline-warning">Warning</a></li>
<li><a href="#" class="btn btn-outline-success">Success</a></li>
<li><a href="#" class="btn btn-outline-danger">Danger</a></li>
</ul>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c428" 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">
<h2 class="element-header">
Contextual Styling
</h2>
</header>
<ul class="list-inline">
<li><span class="text-muted">Muted</span></li>
<li><span class="text-primary">Primary</span></li>
<li><span class="text-secondary">Secondary</span></li>
<li><span class="text-info">Info</span></li>
<li><span class="text-warning">Warning</span></li>
<li><span class="text-success">Success</span></li>
<li><span class="text-danger">Danger</span></li>
</ul>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c943" 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">
<h2 class="element-header">
Examples of Rich Text Content Elements
</h2>
</header>
<p><strong>Continuous text:</strong> text, optional in <strong>bold</strong> or <em>italic</em> or in a combination of<em><strong> bold and italic</strong></em>.</p>
<p><strong>Special characters can be used</strong>: @ © ® ¢ ¼ ½ ¾ § ± a² m³ Ω π µ γ β α H<sub>2</sub>O</p>
<p><strong>Texts in foreign languages can be mixed on one page. </strong><br>The font has to be installed on the device though:</p>
<p>cyrillic: Русская версия <br>chinese: 中文版<br>arabic: <span lang="ar" xml:lang="ar">الْعَرَبيّة</span></p>
<p class="text-center">Centered text</p>
<p class="text-right">Text justified right</p>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c992" 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">
<h2 class="element-header">
Blockquote
</h2>
</header>
<p>Aenean ante elit, elementum et, varius ut, condimentum ut, sem. Aenean ante neque, imperdiet sed, ultricies
vitae, aliquam dictum, arcu. Aenean arcu est, semper vitae, euismod quis, vehicula eu, risus.</p>
<blockquote>
<p>Aenean ante elit, elementum et, varius ut, condimentum ut, sem. Aenean ante neque, imperdiet sed,
ultricies vitae, aliquam dictum, arcu. Aenean arcu est, semper vitae, euismod quis, vehicula eu, risus.</p>
</blockquote>
<p>Aenean ante elit, elementum et, varius ut, condimentum ut, sem. Aenean ante neque, imperdiet sed, ultricies
vitae, aliquam dictum, arcu. Aenean arcu est, semper vitae, euismod quis, vehicula eu, risus.</p>
</div>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c359" 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">
<h2 class="element-header">
Lists
</h2>
</header>
<p>Bulleted list:</p>
<ul class="list-normal">
<li>first level</li>
<li>first level
<ul class="list-normal">
<li>second level</li>
<li>second level
<ul class="list-normal">
<li>third level</li>
<li>third level</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><strong>Ordered list:</strong></p>
<ol>
<li>first level</li>
<li>first level
<ol>
<li>second level</li>
<li>second level
<ol>
<li>third level</li>
<li>third level</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c181" 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">
<h2 class="element-header">
Links
</h2>
</header>
<p>You can insert <a href="#" class="link-page">internal links</a> (links to pages within the website),
<a href="http://typo3.org" target="_blank" class="link-external" rel="noreferrer">external links</a>
(links to external sites) or <a href="mailto:test@test.net" class="link-mail">e-mail links</a>
(links that open the user's email client when clicked).
</p>
<p>Additional link stylings:</p>
<ul class="list-normal">
<li><a href="#" class="link-arrow">Arrow</a></li>
<li><a href="#" class="link-page">Page</a></li>
<li><a href="/fileadmin/bootstrap_package/icons/castle-1.svg" class="link-file">File</a></li>
<li><a href="/fileadmin/bootstrap_package/examples/" class="link-folder">Folder</a></li>
<li><a href="mailto:john.doe@example.com" class="link-mail">E-Mail </a></li>
</ul>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c977" 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">
<h2 class="element-header">
Tables
</h2>
</header>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Benjamin</td>
<td>Kott</td>
<td>@benjaminkott</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Doe</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
<!-- ### Begin: Element text ### -->
<div id="c749" 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">
<h2 class="element-header">
Address
</h2>
</header>
<address class="address">
<p class="address-title"><strong>John Doe</strong></p>
<p class="address-address">Street<br> Zip & City</p>
<p class="address-phone">+49 1234 456-7890</p>
<p class="address-fax">+49 1234 456-7891</p>
<p class="address-email">john.doe@example.com</p>
<p class="address-www">www.example.com</p>
</address>
</div>
</div>
</div>
<!-- ### End: Element text ### -->
{% for variant in variants %}
{% include '@frame-text' with variant %}
{% endfor %}
{
"text_column": null,
"bodytext": "Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Etiam rhoncus. Vestibulum ullamcorper mauris at\nligula. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent porttitor, nulla vitae posuere\niaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.Quisque id mi. Nullam quis ante. In ac felis quis\ntortor malesuada pretium.Nulla facilisi. Donec posuere vulputate arcu. Nunc nulla. Quisque ut nisi. Ut id nisl\nquis enim dignissim sagittis.Phasellus viverra nulla ut metus varius laoreet. Donec mi odio, faucibus at\n",
"variants": [
{
"header": "Multicolumn",
"text_column": true
},
{
"header": "Boxed Content",
"bodytext": "<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec interdum, metus et\nhendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.</p>\n<div class=\"well\">\n <p>Nullam cursus lacinia erat. In auctor lobortis lacus. Vivamus consectetuer hendrerit lacus. Pellentesque\n commodo eros a enim. Suspendisse feugiat.</p>\n</div>\n<p>Praesent vestibulum dapibus nibh. Fusce fermentum. Suspendisse pulvinar, augue ac venenatis condimentum, sem\nlibero volutpat nibh, nec pellentesque velit pede quis nunc.</p>\n"
},
{
"header": "Indented Blocks",
"bodytext": "<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec interdum, metus et\nhendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.</p>\n<div class=\"text-indent\">\n <p>Nullam cursus lacinia erat. In auctor lobortis lacus. Vivamus consectetuer hendrerit lacus. Pellentesque\n commodo eros a enim. Suspendisse feugiat.</p>\n</div>\n<p>Praesent vestibulum dapibus nibh. Fusce fermentum. Suspendisse pulvinar, augue ac venenatis condimentum, sem\nlibero volutpat nibh, nec pellentesque velit pede quis nunc.</p>\n"
},
{
"header": "Buttons",
"bodytext": "<ul class=\"list-inline\">\n <li><a href=\"#\" class=\"btn btn-default\">Default</a></li>\n <li><a href=\"#\" class=\"btn btn-primary\">Primary</a></li>\n <li><a href=\"#\" class=\"btn btn-secondary\">Secondary</a></li>\n <li><a href=\"#\" class=\"btn btn-info\">Info</a></li>\n <li><a href=\"#\" class=\"btn btn-warning\">Warning</a></li>\n <li><a href=\"#\" class=\"btn btn-success\">Success</a></li>\n <li><a href=\"#\" class=\"btn btn-danger\">Danger</a></li>\n</ul>\n<ul class=\"list-inline\">\n <li><a href=\"#\" class=\"btn btn-outline-default\">Default</a></li>\n <li><a href=\"#\" class=\"btn btn-outline-primary\">Primary</a></li>\n <li><a href=\"#\" class=\"btn btn-outline-secondary\">Secondary</a></li>\n <li><a href=\"#\" class=\"btn btn-outline-info\">Info</a></li>\n <li><a href=\"#\" class=\"btn btn-outline-warning\">Warning</a></li>\n <li><a href=\"#\" class=\"btn btn-outline-success\">Success</a></li>\n <li><a href=\"#\" class=\"btn btn-outline-danger\">Danger</a></li>\n</ul>\n"
},
{
"header": "Contextual Styling",
"bodytext": "<ul class=\"list-inline\">\n <li><span class=\"text-muted\">Muted</span></li>\n <li><span class=\"text-primary\">Primary</span></li>\n <li><span class=\"text-secondary\">Secondary</span></li>\n <li><span class=\"text-info\">Info</span></li>\n <li><span class=\"text-warning\">Warning</span></li>\n <li><span class=\"text-success\">Success</span></li>\n <li><span class=\"text-danger\">Danger</span></li>\n</ul>\n"
},
{
"header": "Examples of Rich Text Content Elements",
"bodytext": "<p><strong>Continuous text:</strong> text, optional in <strong>bold</strong> or <em>italic</em> or in a combination of<em><strong> bold and italic</strong></em>.</p>\n<p><strong>Special characters can be used</strong>: @ © ® ¢ ¼ ½ ¾ § ± a² m³ Ω π µ γ β α H<sub>2</sub>O</p>\n<p><strong>Texts in foreign languages can be mixed on one page. </strong><br>The font has to be installed on the device though:</p>\n<p>cyrillic: Русская версия <br>chinese: 中文版<br>arabic: <span lang=\"ar\" xml:lang=\"ar\">الْعَرَبيّة</span></p>\n<p class=\"text-center\">Centered text</p>\n<p class=\"text-right\">Text justified right</p>\n"
},
{
"header": "Blockquote",
"bodytext": "<p>Aenean ante elit, elementum et, varius ut, condimentum ut, sem. Aenean ante neque, imperdiet sed, ultricies\nvitae, aliquam dictum, arcu. Aenean arcu est, semper vitae, euismod quis, vehicula eu, risus.</p>\n<blockquote><p>Aenean ante elit, elementum et, varius ut, condimentum ut, sem. Aenean ante neque, imperdiet sed,\nultricies vitae, aliquam dictum, arcu. Aenean arcu est, semper vitae, euismod quis, vehicula eu, risus.</p></blockquote>\n<p>Aenean ante elit, elementum et, varius ut, condimentum ut, sem. Aenean ante neque, imperdiet sed, ultricies\nvitae, aliquam dictum, arcu. Aenean arcu est, semper vitae, euismod quis, vehicula eu, risus.</p></div>\n"
},
{
"header": "Lists",
"bodytext": "<p>Bulleted list:</p>\n<ul class=\"list-normal\">\n <li>first level</li>\n <li>first level\n <ul class=\"list-normal\">\n <li>second level</li>\n <li>second level\n <ul class=\"list-normal\">\n <li>third level</li>\n <li>third level</li>\n </ul>\n </li>\n </ul>\n </li>\n</ul>\n<p><strong>Ordered list:</strong></p>\n<ol>\n <li>first level</li>\n <li>first level\n <ol>\n <li>second level</li>\n <li>second level\n <ol>\n <li>third level</li>\n <li>third level</li>\n </ol>\n </li>\n </ol>\n </li>\n</ol>\n"
},
{
"header": "Links",
"bodytext": "<p>You can insert <a href=\"#\" class=\"link-page\">internal links</a> (links to pages within the website),\n<a href=\"http://typo3.org\" target=\"_blank\" class=\"link-external\" rel=\"noreferrer\">external links</a>\n(links to external sites) or <a href=\"mailto:test@test.net\" class=\"link-mail\">e-mail links</a>\n(links that open the user's email client when clicked).</p><p>Additional link stylings:</p>\n<ul class=\"list-normal\">\n <li><a href=\"#\" class=\"link-arrow\">Arrow</a></li>\n <li><a href=\"#\" class=\"link-page\">Page</a></li>\n <li><a href=\"/fileadmin/bootstrap_package/icons/castle-1.svg\" class=\"link-file\">File</a></li>\n <li><a href=\"/fileadmin/bootstrap_package/examples/\" class=\"link-folder\">Folder</a></li>\n <li><a href=\"mailto:john.doe@example.com\" class=\"link-mail\">E-Mail </a></li>\n</ul>\n"
},
{
"header": "Tables",
"bodytext": "<div class=\"table-responsive\">\n <table class=\"table table-bordered table-hover\">\n <thead><tr><th>#</th><th>FirstName</th><th>LastName</th><th>Username</th></tr></thead>\n <tbody><tr class=\"success\"><td>1</td><td>Benjamin</td><td>Kott</td><td>@benjaminkott</td></tr>\n <tr><td>2</td><td>John</td><td>Doe</td><td>-</td></tr><tr>\n <td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>\n </table>\n</div>\n"
},
{
"header": "Address",
"bodytext": "<address class=\"address\">\n <p class=\"address-title\"><strong>John Doe</strong></p>\n <p class=\"address-address\">Street<br> Zip & City</p>\n <p class=\"address-phone\">+49 1234 456-7890</p>\n <p class=\"address-fax\">+49 1234 456-7891</p>\n <p class=\"address-email\">john.doe@example.com</p>\n <p class=\"address-www\">www.example.com</p>\n</address>\n"
}
]
}
No notes defined.