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);
}