<div class="call_out_block left normal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor mollis ante id mollis. Nam id consectetur eros. Vivamus sed leo non sem pulvinar viverra id sed metus. In hac habitasse platea dictumst. Duis interdum, odio non placerat sagittis, lorem lectus eleifend nisl, a egestas lacus nulla id leo.</p>
<ul>
<li> Nam quis mi sit amet massa accumsan vehicula. </li>
<li> Aenean condimentum consequat dui, efficitur condimentum felis viverra euismod. Praesent sed arcu sed nisi iaculis facilisis at eu nibh. </li>
<li> Nunc et gravida nisi. Nullam non dui quis ex sollicitudin tincidunt. Curabitur cursus lectus id dictum ornare. Pellentesque et ex tempus, posuere felis a, tincidunt nisi. Nunc feugiat turpis eu ultricies accumsan. Nulla vestibulum mauris id turpis laoreet, vitae cursus magna porttitor. </li>
</ul>
<p> Nunc tellus ligula, aliquam a elit eu, aliquet hendrerit nisl. Proin non tempor tellus. Donec enim lectus, consequat ac urna eu, varius luctus sapien. Suspendisse quis velit mi. Duis congue nibh vel ex efficitur vehicula. Aenean eu magna ornare, aliquam felis blandit, dictum odio. Sed facilisis pretium feugiat. </p>
</div>
<div class="call_out_block{% if alignment %} {{ alignment }}{% endif %}{% if size %} {{ size }}{% endif %}">
{% block section_content %}
{{ callout_text }}
{% endblock section_content %}
</div>
{
"callout_text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor mollis ante id mollis. Nam id consectetur eros. Vivamus sed leo non sem pulvinar viverra id sed metus. In hac habitasse platea dictumst. Duis interdum, odio non placerat sagittis, lorem lectus eleifend nisl, a egestas lacus nulla id leo.</p> <ul> <li> Nam quis mi sit amet massa accumsan vehicula. </li> <li> Aenean condimentum consequat dui, efficitur condimentum felis viverra euismod. Praesent sed arcu sed nisi iaculis facilisis at eu nibh. </li> <li> Nunc et gravida nisi. Nullam non dui quis ex sollicitudin tincidunt. Curabitur cursus lectus id dictum ornare. Pellentesque et ex tempus, posuere felis a, tincidunt nisi. Nunc feugiat turpis eu ultricies accumsan. Nulla vestibulum mauris id turpis laoreet, vitae cursus magna porttitor. </li> </ul> <p> Nunc tellus ligula, aliquam a elit eu, aliquet hendrerit nisl. Proin non tempor tellus. Donec enim lectus, consequat ac urna eu, varius luctus sapien. Suspendisse quis velit mi. Duis congue nibh vel ex efficitur vehicula. Aenean eu magna ornare, aliquam felis blandit, dictum odio. Sed facilisis pretium feugiat. </p>",
"alignment": "left",
"size": "normal"
}
.call_out_block:not(:empty) {
padding: $space_and_half;
color: $lehigh_brown;
line-height: 1.2;
background-color: $grey_light;
&.left {
text-align: left;
}
&.center {
text-align: center;
}
&.normal {
font-size: 1rem;
}
&.large {
font-size: 2rem;
}
}
Popular component for displaying an alert or other important information that stands out from the rest of the page.