<div class="c-wysiwyg-image" data-bkg-theme="base">
<div class="o-container">
<div class="o-row">
<div class="c-wysiwyg-image__image o-col o-col-sm-5 o-col-md-4">
<img src="/images/journal/Wizarding.jpg" alt="Woman holding snake" />
<p class="c-wysiwyg-image__caption f-text--caption">Caption text</p>
<p class="c-wysiwyg-image__credit f-text--credit">Credit text</p>
</div>
<div class="c-wysiwyg-image__text o-wysiwyg o-col o-col-sm-7 o-col-md-8 o-col-lg-7 o-col-lg--offset-1">
<p><strong>Strong</strong> <em>italic</em> <strike>strike</strike> <u>underline</u> <a href="#">inline link</a> lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est velit, interdum non finibus et, italic text bold text. Cras ut ornare libero. Donec ac fringilla quam, dictum bibendum ex. Vestibulum eu felis viverra, porta nibh eget, finibus urna. Mauris non lectus non nisl mattis tincidunt. Maecenas a tristique nisl, eget sollicitudin erat. Nulla maximus ornare velit, sed vulputate arcu commodo sit amet. Maecenas eu lorem nulla. Ut pretium sapien nec elit consequat tristique. Cras id nisl et est condimentum vestibulum in et augue. Mauris est dolor, luctus quis elementum sit amet, luctus et felis. Mauris vehicula felis vitae viverra lobortis. Nam eu sem consectetur, fringilla ipsum id, tincidunt quam. Ut lorem ipsum dolor sit diam at posuere. Nulla ut rhoncus orci. Maecenas tincidunt rutrum luctus. Sed erat ante, sodales quis rhoncus vitae, inline link. Ut odio est, lobortis quis tempus vitae, pulvinar vitae dolor. Donec dapibus lorem nec lorem porta, in laoreet nulla feugiat. Proin euismod risus tellus, in euismod turpis pulvinar non.</p>
</div>
</div>
</div>
</div>
<div class="c-wysiwyg-image" data-bkg-theme="base">
<div class="o-container">
<div class="o-row">
<div class="c-wysiwyg-image__image o-col o-col-sm-5 o-col-md-4">
{{ image|raw }}
{% if caption %}
<p class="c-wysiwyg-image__caption f-text--caption">{{ caption }}</p>
{% endif %}
{% if credit %}
<p class="c-wysiwyg-image__credit f-text--credit">{{ credit }}</p>
{% endif %}
</div>
<div class="c-wysiwyg-image__text o-wysiwyg o-col o-col-sm-7 o-col-md-8 o-col-lg-7 o-col-lg--offset-1">
{{ content|raw }}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"image": "<img src=\"/images/journal/Wizarding.jpg\" alt=\"Woman holding snake\" />",
"content": "<p><strong>Strong</strong> <em>italic</em> <strike>strike</strike> <u>underline</u> <a href=\"#\">inline link</a> lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est velit, interdum non finibus et, italic text bold text. Cras ut ornare libero. Donec ac fringilla quam, dictum bibendum ex. Vestibulum eu felis viverra, porta nibh eget, finibus urna. Mauris non lectus non nisl mattis tincidunt. Maecenas a tristique nisl, eget sollicitudin erat. Nulla maximus ornare velit, sed vulputate arcu commodo sit amet. Maecenas eu lorem nulla. Ut pretium sapien nec elit consequat tristique. Cras id nisl et est condimentum vestibulum in et augue. Mauris est dolor, luctus quis elementum sit amet, luctus et felis. Mauris vehicula felis vitae viverra lobortis. Nam eu sem consectetur, fringilla ipsum id, tincidunt quam. Ut lorem ipsum dolor sit diam at posuere. Nulla ut rhoncus orci. Maecenas tincidunt rutrum luctus. Sed erat ante, sodales quis rhoncus vitae, inline link. Ut odio est, lobortis quis tempus vitae, pulvinar vitae dolor. Donec dapibus lorem nec lorem porta, in laoreet nulla feugiat. Proin euismod risus tellus, in euismod turpis pulvinar non.</p>",
"caption": "Caption text",
"credit": "Credit text"
}
.c-wysiwyg-image {
margin: 5rem 0;
}
.c-wysiwyg-image__image {
margin-bottom: 3.2rem;
}
.c-wysiwyg-image__caption,
.c-wysiwyg-image__credit {
margin-top: 1.2rem;
}
.c-wysiwyg-image__caption + .c-wysiwyg-image__credit {
margin-top: 0.4rem;
}
No notes defined.