360Giving Design System - Components

Sidebar Section: Blog 

<div class="sidebar-section sidebar-section--orange sidebar-section--fixed">
    <div class="layout__content-inner">
        <div class="sidebar-section__item">
            <div class="sidebar-blog">
                <h2 class="sidebar-blog__heading">Categories</h2>
                <ul class="sidebar-blog__content categories-list">
                    <li class="categories-list__item category"><a class="" href="#">How to</a></li>
                    <li class="categories-list__item category"><a class="" href="#">360 Insights blog</a></li>
                    <li class="categories-list__item category category--active">
                        <a class="" href="#">Technical blog</a>
                        <ul>
                            <li><a href="#">Sub item 1</a></li>
                            <li><a href="#">Sub item 2</a></li>
                            <li><a href="#">Sub item 3</a></li>
                            <li><a href="#">Sub item 4</a></li>
                        </ul>
                    </li>
                    <li class="categories-list__item category"><a class="" href="#">Government data</a></li>
                    <li class="categories-list__item category"><a class="" href="#">Innovation is grantmaking</a></li>
                    <li class="categories-list__item category"><a class="" href="#">Understanding civil society</a></li>
                    <li class="categories-list__item category"><a class="" href="#">Follow the funding</a></li>
                    <li class="categories-list__item category"><a class="" href="#">Data Champions</a></li>
                    <li class="categories-list__item category"><a class="" href="#">Events</a></li>
                    <li class="categories-list__item category"><a class="" href="#">360 Update</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>
 
<div class="sidebar-section sidebar-section--orange sidebar-section--fixed">
  <div class="layout__content-inner">
    <div class="sidebar-section__item">
      {% render '@sidebar-blog' %}
    </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.