<div class="c-la-content-block c-la-accordion-content">
<div class="o-accordion c-la-accordion__accordion">
<button class="o-accordion__button js-accordion-toggle o-btn" aria-expanded="false">
<span class="c-la-accordion__hidden">
<span class="o-btn__icon-left" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>View more
</span>
<span class="c-la-accordion__showing">
<span class="o-btn__icon-left" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
</svg>
</span>View less
</span>
</button>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<div class="c-la-accordion__inner-text o-wysiwyg o-wysiwyg--small">
<p>Drowning world is a unique photographic exploration of flooding, a stark portrayal of the human condition within the context of overwhelming climate events around the world.</p>
<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>
<p>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>
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
<p>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>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<p>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>
{% set closedText = closedButtonText is defined ? closedButtonText : 'View More' %}
{% set openText = openButtonText is defined ? openButtonText : 'View Less' %}
<div class="c-la-content-block c-la-accordion-content">
{% embed "04-objects/accordion" with {
buttonClasses: 'o-btn',
classes: 'c-la-accordion__accordion'
}%}
{% block buttonContent %}
<span class="c-la-accordion__hidden">
<span class="o-btn__icon-left" aria-hidden="true">
{% include '03-icons/plus'%}
</span>{{ closedText }}
</span>
<span class="c-la-accordion__showing">
<span class="o-btn__icon-left" aria-hidden="true">
{% include '03-icons/minus'%}
</span>{{ openText}}
</span>
{% endblock buttonContent %}
{% block accordionContent %}
<div class="c-la-accordion__inner-text o-wysiwyg o-wysiwyg--small">
{{ content|raw }}
</div>
{% endblock accordionContent %}
{% endembed %}
</div>
{
"pageColorTheme": "teal",
"closedButtonText": "View more",
"openButtonText": "View less",
"content": "\n <p>Drowning world is a unique photographic exploration of flooding, a stark portrayal of the human condition within the context of overwhelming climate events around the world.</p>\n <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>\n <p>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>\n <ul>\n <li>Unordered list item</li>\n <li>Unordered list item</li>\n <li>Unordered list item</li>\n <li>Unordered list item</li>\n <li>Unordered list item</li>\n </ul>\n <p>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>\n <ol>\n <li>Ordered list item</li>\n <li>Ordered list item</li>\n <li>Ordered list item</li>\n <li>Ordered list item</li>\n <li>Ordered list item</li>\n </ol>\n <p>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>\n "
}
.c-la-accordion__showing {
display: none;
.is-open & {
display: flex;
flex-direction: row;
}
}
.c-la-accordion__hidden {
display: flex;
flex-direction: row;
.is-open & {
display: none;
}
}
.c-la-accordion__inner-text {
padding-top: 2.4rem;
}
No notes defined.