<div class="sidebar_callout">
<h2>Sidebar Call Out</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis.</p>
<div class="btn_wrapper">
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">Action Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div><!-- end sidebar_callout -->
<div class="sidebar_callout">
{% block sidebar_title %}
<h2>{{ title }}</h2>
{% endblock sidebar_title %}
{% block sidebar_body %}
<p>{{ body }}</p>
{% endblock sidebar_body %}
{% block buttons %}
<div class="btn_wrapper">
{% for button in buttons %}
{% include "@a_tag" with button only %}
{% endfor %}
</div>
{% endblock buttons %}
</div><!-- end sidebar_callout -->
{
"title": "Sidebar Call Out",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis.",
"buttons": {
"1": {
"text": "Action Button",
"url": "#",
"color": "gold"
}
}
}
.sidebar_callout {
background-color: $grey_lightest;
background-color: var(--grey_lightest, $grey_lightest);
padding: $space_and_half $spacer;
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
.color-scheme-dark & {
background-color: $dark_mode_grey;
}
h2 {
font-size: 1.25rem;
font-weight: bold;
}
.btn_wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
a {
.color-scheme-dark & {
color: $hyperlink_darkmode;
color: var(--hyperlink_darkmode, $hyperlink_darkmode);
border-bottom: 2px solid $hyperlink_darkmode;
}
&:hover,
&:focus {
.color-scheme-dark & {
color: $white;
}
}
}
}
Display sidebar callout component.