Panels

Sidebar containers for navigation, data sources, and supplementary content.

Basic Panel

<div class="sw-panel-header">
  <span class="sw-panel-title">Data Sources</span>
  <button class="sw-btn-icon">...</button>
</div>
<div class="sw-panel-content">
  <div class="sw-list-item">...</div>
</div>

CSS

.sw-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sw-space-3) var(--sw-space-4);
  border-bottom: 1px solid var(--sw-border-default);
}

.sw-panel-title {
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-font-semibold);
  color: var(--sw-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sw-panel-content {
  padding: var(--sw-space-2);
}