Surfaces & Patterns

Surface Classes

Wrappers that provide consistent card-like appearance with borders, radius, and background.

Class	Description	Usage
.uc-surface-card	Bordered card with radius and surface background	Wrapping content blocks, settings panels
.uc-surface-card--clip	Surface card with overflow hidden	Cards with images or content that should clip at edges
.uc-table-wrap	Surface card for tables with overflow hidden	Wrapping tables and data grids

Surface Card

.uc-surface-card — bordered container with surface background

Table Wrap

.uc-table-wrap — same as surface card, with overflow hidden

Tone Modifiers

Apply semantic coloring for info, success, warning, and danger states.

html

Informational tone .uc-tone-info

Success / positive tone .uc-tone-success

Warning / caution tone .uc-tone-warning

Error / danger tone .uc-tone-danger

&lt;!-- Tone modifiers add bg, border, and text color --&gt;
&lt;div class="uc-alert uc-tone-info"&gt;Info message&lt;/div&gt;
&lt;div class="uc-alert uc-tone-success"&gt;Success message&lt;/div&gt;
&lt;div class="uc-alert uc-tone-warning"&gt;Warning message&lt;/div&gt;
&lt;div class="uc-alert uc-tone-danger"&gt;Error message&lt;/div&gt;

Status Indicators

Small pills and dots for showing state in tables, lists, and cards.

html

Active

Offline

Pending

In Review

&lt;div class="uc-status-pill uc-tone-success"&gt;
  &lt;span class="uc-status-dot"&gt;&lt;/span&gt;
  Active
&lt;/div&gt;

&lt;div class="uc-status-pill uc-tone-danger"&gt;
  &lt;span class="uc-status-dot"&gt;&lt;/span&gt;
  Offline
&lt;/div&gt;

Table Styling

Use uc-table inside uc-table-wrap for consistent data tables.

html

Name	Status	Role
Alice Johnson	Active	Admin
Bob Smith	Pending	Editor
Carol White	Offline	Viewer

&lt;div class="uc-table-wrap"&gt;
  &lt;table class="uc-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Status&lt;/th&gt;
        &lt;th&gt;Role&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Alice&lt;/td&gt;
        &lt;td&gt;Active&lt;/td&gt;
        &lt;td&gt;Admin&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;

Component Class Reference

Quick reference of all pre-built component classes defined in the system.

Group	Classes
Button	`.uc-btn.uc-btn-primary.uc-btn-secondary.uc-btn-bordered.uc-btn-clear.uc-btn-danger.uc-btn-link.uc-btn-sm.uc-btn-lg.uc-btn-icon`
Input	`.uc-input.uc-input-error.uc-textarea.uc-textarea-error.uc-label`
Card	`.uc-card.uc-card-header.uc-card-body.uc-card-footer`
Badge	`.uc-badge.uc-badge-primary.uc-badge-secondary.uc-badge-bordered.uc-badge-danger.uc-badge-success.uc-badge-warning`
Alert	`.uc-alert.uc-alert-info.uc-alert-success.uc-alert-warning.uc-alert-danger`
Avatar	`.uc-avatar.uc-avatar-sm.uc-avatar-md.uc-avatar-lg.uc-avatar-xl`
Tabs	`.uc-tabs-list.uc-tabs-trigger.uc-tabs-list-underline.uc-tabs-trigger-underline`
Separator	`.uc-separator.uc-separator-h.uc-separator-v`
Progress	`.uc-progress.uc-progress-bar`
Skeleton	`.uc-skeleton.uc-skeleton-circle`
Dialog	`.uc-dialog-overlay.uc-dialog`
Toast	`.uc-toast`
Tooltip	`.uc-tooltip`
Scroll	`.uc-scroll.uc-scroll-hidden.uc-scroll-autohide.uc-scroll-indicator.uc-scroll-indicator-h`