Design system preview

Primary, secondary, outline, danger, ghost, file, link, sizes, and disabled states.

btn--width-min (≥72px), btn--width-max (full width up to --btn-max-width).

.ds-tooltip-wrap + .ds-info-btn (or .btn-info) + .ds-tooltip with role="tooltip" and aria-describedby. Hover or keyboard focus shows the tip. Add .ds-tooltip-wrap--tip-bottom to point downward.

Nested cards use the same padding tokens as .main-card. Use .ds-card--compact or .ds-card--flush when needed.

Use .ds-tabs, .ds-tablist, .ds-tab, .ds-tabpanels, .ds-tabpanel. Toggle .is-active and aria-selected on the tab; show the matching panel.

.ds-select-search uses the same dropdown arrow as select.select (10×6px, #6a6f83). Native select uses appearance: none plus the shared SVG.

Inputs, textarea, selects, stacks, fieldset, and .form-actions. Default text/select use --input-min-width / --input-max-width.

.input--fluid allows full width of the parent (still respects min width).

Grouped options

Inline label (field-label--inline)

Checkbox item 1 Checkbox item 2 Checkbox item 3

Example two-column admin form using .text-input, .select, .btn-secondary, and .form-actions. See the full page in users.html.

Loader Configurations

Accordion body Preview

Instruments

Select Instrument From:

File Database

Select Type - Subtype:

00A_DR - CH1 00A_DR - DRV 00N_PRED - MGSQA_MASTER 00N_PRED - pred_normal

Data

Data Header Exist?: Row - 1 selected Remark Exist?: Column - 5 selected Metadata Exists?:

Select Instruments:

--Select Instrument-- Instrument A Instrument B

Date

Select Date From:

File System

Read Date:

Column Wise Row Wise

Select If Julian Date:

Save Next