<div class="sidebar-content sidebar-content--orange">
<h3 class="sidebar-content__heading">This is a heading in the sidebar</h3>
<p class="sidebar-content__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque dolorem molestias numquam, necessitatibus perferendis consequatur asperiores, veritatis similique illum repudiandae quibusdam consectetur mollitia doloribus officia. Beatae nobis atque molestias pariatur voluptas totam consequatur, neque obcaecati commodi architecto modi laudantium ab suscipit optio impedit ea aut?
</p>
<figure class="sidebar-content__image">
<img src="https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=802&amp;q=80" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quod, voluptatibus. Ex id, autem distinctio.">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quod, voluptatibus. Ex id, autem distinctio.</figcaption>
</figure>
</div>
<div class="sidebar-content{% if colour %} sidebar-content--{{colour}}{% endif %}">
{% if heading %}<h3 class="sidebar-content__heading">{{heading}}</h3>{% endif %}
{% if text %}<p class="sidebar-content__text">{{text}}</p>{% endif %}
{% if image %}
<figure class="sidebar-content__image" >
<img src="{{ image }}"
alt="{{ caption }}">
<figcaption>{{caption}}</figcaption>
</figure>
{% endif %}
</div>
{
"heading": "This is a heading in the sidebar",
"colour": "orange",
"image": "https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=802&q=80",
"caption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quod, voluptatibus. Ex id, autem distinctio.",
"text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque dolorem molestias numquam, necessitatibus perferendis consequatur asperiores, veritatis similique illum repudiandae quibusdam consectetur mollitia doloribus officia. Beatae nobis atque molestias pariatur voluptas totam consequatur, neque obcaecati commodi architecto modi laudantium ab suscipit optio impedit ea aut?\n"
}
.sidebar-content {
--sidebar-content-heading-hsl: var(--base-hsl);
padding: 16px 32px;
text-align: right;
}
.sidebar-content__heading {
font-size: 1rem;
font-weight: bold;
color: hsla(var(--sidebar-content-heading-hsl), 1);
}
.sidebar-content__text {
font-size: .9rem;
color: hsla(var(--base-hsl), 1);
}
.sidebar-content__image { padding: 16px 0; }
.sidebar-content__image figcaption {
padding-top: 8px;
font-size: .8rem;
color: hsla(var(--base-hsl), 1);
font-size: italic;
}
.sidebar-content--orange { --sidebar-content-heading-hsl: var(--orange-dark-hsl); }
.sidebar-content--teal { --sidebar-content-heading-hsl: var(--teal-dark-hsl); }
.sidebar-content--yellow { --sidebar-content-heading-hsl: var(--yellow-dark-hsl); }
.sidebar-content--red { --sidebar-content-heading-hsl: var(--red-hsl); }
No notes defined.