D.School Component Library

Sidebar 

<aside class="c-sidebar u-spacing--lg">
      <h5 class="o-heading o-heading--h5-secondary-bold">
          Event Details
      </h5>
      <div class="o-rich-text">
          Multi-Session Event<br>Fridays, 10am-12pm PT
      </div>
      <div class="o-rich-text">
          Studio Hours (optional bonus sessions)<br>Tuesdays, 10-11am PT
      </div>
      <div class="o-rich-text">
          Key Details<br><br>Full fee: $795<br>Discounted fee: $495<br>Please see below for additional details regarding pricing.<br>Participants will receive a Certificate of Participation from the d.school.
      </div>
      <div class="o-rich-text">
          Custom link label (30 Char) *optional <a href='/'>Action Text</a>
      </div>
  </aside>
 
{% set base_class = sidebar.base_class|default('c-sidebar') %}
{% if sidebar.includes %}
  <aside class="{{ bem(base_class, sidebar.element, sidebar.modifiers, sidebar.extra) }} u-spacing--lg">
    {% for item in sidebar.includes %}
      {% render "@" ~ item.name with item.context %}
    {% endfor %}
  </aside>
{% endif %}
 
{
  "sidebar": {
    "includes": [
      {
        "name": "heading",
        "context": {
          "heading": {
            "text": "Event Details",
            "size": "h5-secondary-bold",
            "level": "5"
          }
        }
      },
      {
        "name": "rich-text",
        "context": {
          "rich_text": {
            "text": "Multi-Session Event<br>Fridays, 10am-12pm PT"
          }
        }
      },
      {
        "name": "rich-text",
        "context": {
          "rich_text": {
            "text": "Studio Hours (optional bonus sessions)<br>Tuesdays, 10-11am PT"
          }
        }
      },
      {
        "name": "rich-text",
        "context": {
          "rich_text": {
            "text": "Key Details<br><br>Full fee: $795<br>Discounted fee: $495<br>Please see below for additional details regarding pricing.<br>Participants will receive a Certificate of Participation from the d.school."
          }
        }
      },
      {
        "name": "rich-text",
        "context": {
          "rich_text": {
            "text": "Custom link label (30 Char) *optional <a href='/'>Action Text</a>"
          }
        }
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $SIDEBAR
\* ------------------------------------ */

.c-sidebar {
  > * {
    margin: 0;
    padding-bottom: var(--ds-space-xs);
  }

  > * + * + * {
    padding-top: var(--ds-space-xs);
    border-top: var(--ds-border-width) solid var(--ds-color-border-tertiary);
  }

  .o-rich-text {
    --flow-space: 0;

    a:not(.o-button) {
      font: var(--ds-typography-primary-p2);
      font-weight: var(--ds-font-weight-light) !important;
      position: relative;

      &::after {
        content: "";
        display: inline-flex;
        height: 1px;
        width: 100%;
        background-color: currentcolor;
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translateY(100%);
      }
      &:hover:not(:disabled),
      &:focus {
        color: var(--ds-color-content-secondary);
      }
    }
  }
}
  • URL: /components/raw/sidebar/_sidebar.scss
  • Filesystem Path: components/03-organisms/sidebar/_sidebar.scss
  • Size: 882 Bytes

No notes defined.