<div class="page_header_wrapper ">
<div class="page_header">
<div class="page_header_content">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_content_inner">
<div class="page_header_breadcrumb">
<div class="breadcrumb">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_icon" aria-hidden="true">
<i class="fa-regular fa-regular fa-house"></i>
</span>
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"></span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Navigation Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"></span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Parent Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"></span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label"></span>
</span>
</span>
</li>
</ol>
</nav>
</div>
</div>
<div class="page_header_intro">
<h1 class="page_header_title" id="page_title" tabindex="-1">WYSIWYG</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_sole">
<div class="page_header_teaser">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_teaser_inner">
<div class="page_header_teaser_description">Dis facilisis tellus ultricies vestibulum cubilia risus, blandit commodo hac ut posuere ex cursus, class libero imperdiet nullam odio.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_content" id="page_content" tabindex="-1" aria-labelledby="page_title">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<!-- WYSIWYG -->
<div class="wysiwyg_block">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="wysiwyg_block_inner typography">
<!-- Headings -->
<h1>H1 Crass Viverra Ante Vitate Dictum</h1>
<div class="intro">
<p>Cras viverra ante vitae dictum vestibulum. Nam placerat nulla eu dolor scelerisque mattis et in diam. Quisque tempor ullamcorper odio sit amet vestibulum.</p>
</div>
<h2>H2 Crass Viverra Ante Vitate Dictum</h2>
<p>Cras viverra ante vitae dictum vestibulum. Nam
<a href="#">placerat</a>
nulla eu dolor scelerisque mattis et in diam. Quisque tempor
<a href="#">ullamcorper</a>
odio sit amet vestibulum. Praesent cursus tellus nunc, ut venenatis lacus scelerisque sed. Pellentesque mi risus, ultrices id fringilla non, sodales non mi. In feugiat lorem id efficitur euismod.
</p>
<h3>H3 Crass Viverra Ante Vitate Dictum</h3>
<h4>H4 Crass Viverra Ante Vitate Dictum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<h5>H5 Crass Viverra Ante Vitate Dictum</h5>
<h6>H6 Crass Viverra Ante Vitate Dictum</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<figure class="block_right">
<img src="https://images.fastspot.com/framework/740x416/1" alt="">
<figcaption>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.</figcaption>
</figure>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<figure class="block_left">
<img src="https://images.fastspot.com/framework/740x416/2" alt="">
</figure>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p>
<figure class="block_center">
<img src="https://images.fastspot.com/framework/1200x675/3" alt="">
<figcaption>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.</figcaption>
</figure>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p>
<!-- Blockquote - WYSIWYG -->
<blockquote>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.</p>
</blockquote>
<figure class="quote">
<blockquote class="quote_content">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.</p>
</blockquote>
<figcaption class="quote_caption">
<span class="quote_caption_name">Aenean massa</span>
<span class="quote_caption_title">Nullam dictum felis</span>
</figcaption>
</figure>
<!-- Unordered List -->
<ul>
<li>
<strong>Morbi leo risus</strong>, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</li>
<li>
<strong>Porta ac consectetur ac</strong>, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</li>
<li>
<strong>Cum sociis natoque penatibus</strong>
et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.
<ul>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros
<ul>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros</li>
</ul>
</li>
</ul>
</li>
<li>
<strong>Vestibulum at eros.</strong>
Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</li>
</ul>
<!-- Ordered List -->
<ol>
<li>
<strong>Morbi leo risus</strong>, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</li>
<li>
<strong>Porta ac consectetur ac</strong>, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</li>
<li>
<strong>Cum sociis natoque penatibus</strong>
et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.
<ul>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros
<ul>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros</li>
</ul>
</li>
</ul>
</li>
<li>
<strong>Vestibulum at eros.</strong>
Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</li>
</ol>
<h2>Table Title</h2>
<!-- Table -->
<table>
<thead>
<tr>
<th>Colors</th>
<th>Shapes</th>
<th>Numbers</th>
<th>Percentages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Black</td>
<td>Circle</td>
<td>One</td>
<td>10% of Lorem ipsum dolor sit amet, consectetur.</td>
</tr>
<tr>
<td>Blue</td>
<td>Square</td>
<td>Two</td>
<td>33% of Donec ullamcorper nulla non metus auctor.</td>
</tr>
<tr>
<td>Green</td>
<td>Triangle</td>
<td>Three</td>
<td>5% of Integer posuere erat a ante venenatis.</td>
</tr>
<tr>
<td>Red</td>
<td>Rectangle</td>
<td>Four</td>
<td>90% of Aenean eu leo quam vestibulum.</td>
</tr>
<tr>
<td>White</td>
<td>Oval</td>
<td>Five</td>
<td>100% of Cum sociis natoque penatibus et mus.</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>Colors</td>
<td>Shapes</td>
<td>Numbers</td>
<td>Percentages</td>
</tr>
</thead>
<tbody>
<tr>
<td>Black</td>
<td>Circle</td>
<td>One</td>
<td>10% of Lorem ipsum dolor sit amet, consectetur.</td>
</tr>
<tr>
<td>Blue</td>
<td>Square</td>
<td>Two</td>
<td>33% of Donec ullamcorper nulla non metus auctor.</td>
</tr>
<tr>
<td>Green</td>
<td>Triangle</td>
<td>Three</td>
<td>5% of Integer posuere erat a ante venenatis.</td>
</tr>
<tr>
<td>Red</td>
<td>Rectangle</td>
<td>Four</td>
<td>90% of Aenean eu leo quam vestibulum.</td>
</tr>
<tr>
<td>White</td>
<td>Oval</td>
<td>Five</td>
<td>100% of Cum sociis natoque penatibus et mus.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- END: WYSIWYG -->
</div>
</div>
</div>
</div>
{% include '@component-page-header' with {
page: page
} %}
<div class="page_content" id="page_content" tabindex="-1" aria-labelledby="page_title">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
{% include '@component-wysiwyg' with {
content: '<h2>Header 22</h2><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Praesent <a href>commodo cursus</a> magna, vel scelerisque nisl consectetur.</p> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod.</p><h3>Header 3</h3><p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><hr /><h4>Header 4</h4><p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><h5>Header 5</h5><p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><h6>Header 5</h6><p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><ul><li>Aenean lacinia bibendum nulla sed consectetur</li><li>Aenean lacinia bibendum nulla sed consectetur</li><li>Aenean lacinia bibendum nulla sed consectetur</li><li>Aenean lacinia bibendum nulla sed consectetur</li></ul><h6>optional unordered/ordered list title:</h6><ol><li>Aenean lacinia bibendum nulla sed consectetur</li><li>Aenean lacinia bibendum nulla sed consectetur</li><li>Aenean lacinia bibendum nulla sed consectetur</li><li>Aenean lacinia bibendum nulla sed consectetur</li></ol><table><thead><tr><th>Dodo</th><th>Dodo</th><th>Dodo</th></tr></thead><tbody><tr><td>Dodo</td><td>Dodo</td><td>Dodo</td></tr><tr><td>Dodo</td><td>Dodo</td><td>Dodo</td></tr><tr><td>Dodo</td><td>Dodo</td><td>Dodo</td></tr></tbody></table>',
} %}
</div>
</div>
</div>
</div>
No notes defined.