360Giving Design System - Components

Sidebar Section: Default 

<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;amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;amp;auto=format&amp;amp;fit=crop&amp;amp;w=802&amp;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. */
  • Content: 
    .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);         }
  • URL: /components/raw/sidebar-section/sidebar-section.scss
  • Filesystem Path: src/components/05-templates/sidebar-section/sidebar-section.scss
  • Size: 729 Bytes

No notes defined.