<div class="sidebar-section sidebar-section--orange">
<div class="layout__content-inner">
<div class="sidebar-section__item">
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Additional fields</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Actual Dates</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Planned Dates</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Additional fields</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Actual Dates</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Planned Dates</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Additional fields</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Actual Dates</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Planned Dates</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional fields</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<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>
</div>
</div>
<div class="sidebar-section sidebar-section--orange">
<div class="layout__content-inner">
<div class="sidebar-section__item">
{% render '@sidebar-list' %}
{% render '@sidebar-content' %}
</div>
</div>
</div>
/* No context defined. */
.sidebar-section {
--sidebar-bg-hsl: var(--base-hsl);
margin-top: 88px;
box-shadow: 4px 0 8px hsla(var(--base-hsl), .1);
padding-top: 0;
padding-bottom: 0;
margin-right: 24px;
position: relative;
&:before {
content: '';
width: 4px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: hsla(var(--sidebar-bg-hsl), 1);
}
}
.sidebar-section--fixed {
top: 0;
position: sticky;
}
.sidebar-section--orange { --sidebar-bg-hsl: var(--orange-dark-hsl); }
.sidebar-section--teal { --sidebar-bg-hsl: var(--teal-dark-hsl); }
.sidebar-section--yellow { --sidebar-bg-hsl: var(--yellow-dark-hsl); }
.sidebar-section--red { --sidebar-bg-hsl: var(--red-hsl); }
No notes defined.