360Giving Design System - Components

Sidebar Blog 

<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 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>
 
/* No context defined. */
  • Content: 
    .sidebar-blog {
    text-align: right;
    padding-top: 0px;

    &__heading {
      padding: 0 32px 8px;
      margin: 0;
      font-weight: 400;
    }

    &__text{
      padding: 102px;
      max-width: 700px;
    }

    &__content {
      padding: 0px;
    }
}

.categories-list {
  list-style: none;

  &__item {

    & > a {
      font-weight: bold;
    }

    & > ul {
      list-style: none;

      & > li {
        margin-top: 1rem;
      }
    }
  }
}

.category {
  padding: 16px 32px;
  display: block;
  color: hsla(var(--base-hsl), .6);
  font-size: 1.2rem;

  &:hover {
    background-color: hsla(var(--base-hsl), .1);
    // background: linear-gradient(90deg, hsla(var(--base-hsl), 0) 0%, hsla(var(--base-hsl), .1) 100%);
  }

  a:hover {
    text-decoration: underline;
  }

  &--active {
    background-color: hsla(var(--teal-hsl), 0.2);
    // background: linear-gradient(90deg, hsla(var(--teal-hsl), 0) 0%, hsla(var(--base-hsl), .3) 100%);
  }
}
  • URL: /components/raw/sidebar-blog/sidebar-blog.scss
  • Filesystem Path: src/components/04-modules/sidebar-blog/sidebar-blog.scss
  • Size: 967 Bytes

No notes defined.