Content Block Complete
A block layout for creating a heading along with a teaser and CTA.
Default
The default content block implementation.
Expand
The expand content block is used to initial hide content, while allowing the user to expand it when necessary. This block is set with the expand button on the right, similar to an accordion.
Show More
The show more content block is used to initial hide content, while allowing the user to expand it when necessary. This block is set with the show more button on the lower left.
-
<div class="c-block c-block__text u-theme--border-color--darker u-border--left u-spacing"> <h3 class="u-theme--color--darker u-font--primary--m"> <a href="/" class="c-block__title-link u-theme--link-hover--dark"> <strong>General Conference</strong> </a> </h3> <p class="c-block__body text">Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.</p> <a href="/" class="c-block__button o-button o-button--outline">Learn More<span class="u-icon u-icon--m u-path-fill--base u-space--half--left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>o-arrow__long--left</title><path d="M18.29,8.59l-3.5-3.5L13.38,6.5,15.88,9H.29v2H15.88l-2.5,2.5,1.41,1.41,3.5-3.5L19.71,10Z" fill="#9b9b9b"/></svg> </span></a> </div>{% if content_block_default %} <div class="c-block c-block__text {% if content_block_default.img %}{{ 'has-image' }}{% endif %} u-theme--border-color--darker u-border--left {{ content_block_default.block_class }}"> {% if content_block_default.img %} <img class="c-block__image" src="{{ content_block_default.img.src }}" /> {% endif %} <h3 class="u-theme--color--darker {{ content_block_default.title_class }}"> {% if content_block_default.url %} <a href="{{ content_block_default.url }}" class="c-block__title-link u-theme--link-hover--dark"> {% endif %} <strong>{{ content_block_default.title | raw }}</strong> {% if content_block_default.url %} </a> {% endif %} </h3> {% if content_block_default.description %} <p class="c-block__body text">{{ content_block_default.description | raw }}</p> {% endif %} {% if content_block_default.category %} <span class="c-block__meta u-theme--color--dark u-font--secondary--xs">{{ content_block_default.category }}</span> {% endif %} {% if content_block_default.body %} <div class="c-block__content"> <p>{{ content_block_default.body | raw }}</p> </div> {% endif %} {% if content_block_default.expand %} <a href="" class="o-button o-button--outline o-button--expand js-toggle-parent"></a> {% else %} {% if content_block_default.cta %} <a href="{{ content_block_default.url }}" class="c-block__button o-button o-button--outline">{{ content_block_default.cta }}<span class="u-icon u-icon--m u-path-fill--base u-space--half--left">{% include '@atoms/icons/icon-arrow-long-right.twig' %}</span></a> {% endif %} {% endif %} </div> {% endif %} -
<div class="js-this c-block c-block c-block__expand u-background-color--gray--light u-border--left u-theme--border-color--darker--left can-be--dark-dark"> <div class="c-block__header"> <div class="c-block__title u-padding"> <h2 class="u-font--primary--s u-theme--color--darker"> <span class="u-theme--color--base"><em>Context Matters</em></span> Donec sit amet justo at sapien aliquet iaculis. </h2> <div class="c-block__toggle"> <button class="js-toggle o-button o-button--outline o-button--toggle o-button--small" data-toggled="this" data-prefix="this"><span class="u-icon u-icon--xs u-path-fill--white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__plus</title><path d="M10,4H6V0H4V4H0V6H4v4H6V6h4Z" fill="#9b9b9b"/></svg> </span></button> </div> </div> <!-- /.c-block__title --> </div> <!-- /.c-block__header --> <div class="c-block__body u-padding u-padding--zero--top u-spacing"> <p>Nam pretium et mauris sit amet vehicula. Morbi at est tristique, mollis odio ut, dignissim tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed placerat nec nisl at laoreet. Cras tristique lacus turpis, sit amet luctus lorem facilisis sed. Suspendisse tempor ante mauris, vitae bibendum sem interdum sit amet. Nam vitae elit lobortis, vehicula neque ut, semper massa.</p><p>Proin hendrerit, diam eget aliquam semper, ipsum elit efficitur erat, a consectetur tortor ex at arcu. Nullam tincidunt lacus at scelerisque pulvinar. Donec faucibus maximus mi ut congue. Proin purus libero, fringilla et orci a, luctus posuere purus. Curabitur justo mi, auctor ut turpis eu, accumsan malesuada elit.</p> </div> <!-- /.c-block__body --> </div> <!-- /.c-block -->{% if content_block_expand %} <div class="js-this c-block c-block c-block__expand u-background-color--gray--light u-border--left u-theme--border-color--darker--left can-be--dark-dark"> <div class="c-block__header"> <div class="c-block__title u-padding"> {% if content_block_expand.title %} <h2 class="u-font--primary--s u-theme--color--darker"> <span class="u-theme--color--base"><em>{{ content_block_expand.kicker }}</em></span> {{ content_block_expand.title }} </h2> {% endif %} <div class="c-block__toggle"> <button class="js-toggle o-button o-button--outline o-button--toggle o-button--small" data-toggled="this" data-prefix="this"><span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/icon-plus.twig' %}</span></button> </div> </div> <!-- /.c-block__title --> </div> <!-- /.c-block__header --> <div class="c-block__body u-padding u-padding--zero--top u-spacing"> {{ content_block_expand.body | raw }} </div> <!-- /.c-block__body --> </div> <!-- /.c-block --> {% endif %} -
<div class="c-block c-block__text has-image u-theme--border-color--darker u-border--left c-block__text-expand u-spacing u-background-color--gray--light u-padding u-clear-fix can-be--dark-dark"> <img class="c-block__image" src="//picsum.photos/400/400" /> <h3 class="u-theme--color--darker u-font--primary--m"> <a href="/" class="c-block__title-link u-theme--link-hover--dark"> <strong>Mariana Chambers</strong> </a> </h3> <p class="c-block__body text">Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus.</p> <div class="c-block__content"> <p>Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.</p> </div> <a href="" class="o-button o-button--outline o-button--expand js-toggle-parent"></a> </div>{% if content_block_default %} <div class="c-block c-block__text {% if content_block_default.img %}{{ 'has-image' }}{% endif %} u-theme--border-color--darker u-border--left {{ content_block_default.block_class }}"> {% if content_block_default.img %} <img class="c-block__image" src="{{ content_block_default.img.src }}" /> {% endif %} <h3 class="u-theme--color--darker {{ content_block_default.title_class }}"> {% if content_block_default.url %} <a href="{{ content_block_default.url }}" class="c-block__title-link u-theme--link-hover--dark"> {% endif %} <strong>{{ content_block_default.title | raw }}</strong> {% if content_block_default.url %} </a> {% endif %} </h3> {% if content_block_default.description %} <p class="c-block__body text">{{ content_block_default.description | raw }}</p> {% endif %} {% if content_block_default.category %} <span class="c-block__meta u-theme--color--dark u-font--secondary--xs">{{ content_block_default.category }}</span> {% endif %} {% if content_block_default.body %} <div class="c-block__content"> <p>{{ content_block_default.body | raw }}</p> </div> {% endif %} {% if content_block_default.expand %} <a href="" class="o-button o-button--outline o-button--expand js-toggle-parent"></a> {% else %} {% if content_block_default.cta %} <a href="{{ content_block_default.url }}" class="c-block__button o-button o-button--outline">{{ content_block_default.cta }}<span class="u-icon u-icon--m u-path-fill--base u-space--half--left">{% include '@atoms/icons/icon-arrow-long-right.twig' %}</span></a> {% endif %} {% endif %} </div> {% endif %}