Cards

Containers for grouping related content.

Default Card

Elevated with shadow for primary content.

<div class="sw-card">
  Card content here
</div>

Bordered Card

Border instead of shadow. Use inside other cards or modals.

<div class="sw-card sw-card-bordered">
  Bordered card without shadow. Good for nested content.
</div>

With Header

<div class="sw-card">
  <h3 class="sw-card-title">Card Title</h3>
  <p class="sw-card-subtitle">Optional subtitle</p>
  Card content goes here.
</div>

With Footer

Design Notes

Constructive action goes on left

<div class="sw-card">
  <p>Settings</p>
  <p class="sw-card-subtitle">Make changes to your account settings here.</p>
  <button class="sw-btn sw-btn-primary">Save</button>
  <button class="sw-btn sw-btn-secondary">Cancel</button>
</div>

CSS

.sw-card {
  background: var(--sw-bg-card);
  border-radius: var(--sw-radius-2xl);
  box-shadow: var(--sw-shadow-md);
  overflow: hidden;
  padding: var(--sw-space-5) var(--sw-space-6);
}

.sw-card-bordered {
  border: 1px solid var(--sw-border-default);
  box-shadow: none;
}

.sw-card-elevated {
  box-shadow: var(--sw-shadow-lg);
}

.sw-card-title {
  font-size: var(--sw-text-lg);
  font-weight: var(--sw-font-semibold);
  color: var(--sw-text-primary);
  margin: 0;
}

.sw-card-subtitle {
  font-size: var(--sw-text-sm);
  color: var(--sw-text-secondary);
  margin: var(--sw-space-1) 0 0 0;
}