Component Library

Component specifications ensure consistent implementation across all Alterspective products. All components follow accessibility guidelines (WCAG AA) and brand color palette.

Buttons

Primary Button

For main actions and CTAs

Specifications

background var(--as-marine)
color var(--as-white)
padding 12px 24px
borderRadius 4px
fontSize 14px
fontWeight 600
border none
minHeight 44px

States

  • hover: background: #096166 (darker marine)
  • active: background: #053C40
  • disabled: background: #E5EEEF, color: #999
View CSS Code 
.btn-primary {
  background: var(--as-marine);
  color: var(--as-white);
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  min-height: 44px;
  cursor: pointer;
}

.btn-primary:hover {
  background: #096166;
}

.btn-primary:disabled {
  background: #E5EEEF;
  color: #999;
  cursor: not-allowed;
}

Secondary Button

For secondary actions

Specifications

background transparent
color var(--as-marine)
padding 12px 24px
borderRadius 4px
fontSize 14px
fontWeight 600
border 2px solid var(--as-marine)
minHeight 44px

States

  • hover: background: var(--as-pale-blue)
  • active: border-color: #053C40
  • disabled: border-color: #E5EEEF, color: #999
View CSS Code 
.btn-secondary {
  background: transparent;
  color: var(--as-marine);
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--as-marine);
  min-height: 44px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--as-pale-blue);
}

.btn-secondary:disabled {
  border-color: #E5EEEF;
  color: #999;
  cursor: not-allowed;
}

Form Components

Text Input

Standard form input field

Specifications

background var(--as-white)
color var(--as-navy)
padding 10px 12px
borderRadius 4px
fontSize 14px
border 1px solid #D1D5DB
minHeight 44px

States

  • focus: border-color: var(--as-marine), outline: 2px solid rgba(7, 81, 86, 0.2)
  • error: border-color: #BA1A1A
  • disabled: background: #F3F4F6, color: #999
View CSS Code 
.form-input {
  background: var(--as-white);
  color: var(--as-navy);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid #D1D5DB;
  min-height: 44px;
  width: 100%;
}

.form-input:focus {
  border-color: var(--as-marine);
  outline: 2px solid rgba(7, 81, 86, 0.2);
}

.form-input:disabled {
  background: #F3F4F6;
  color: #999;
}

Cards

Basic Card

Container for content grouping

Card Title

This is a basic card component for grouping related content.

Specifications

background var(--as-white)
padding var(--as-space-6)
borderRadius 8px
boxShadow 0 2px 4px rgba(0, 0, 0, 0.1)
border 1px solid var(--as-pale-blue)

Featured Card

Highlighted content card

Featured Content

Use this card style to highlight important information or featured content.

Specifications

background var(--as-pale-blue)
padding var(--as-space-6)
borderRadius 8px
borderLeft 4px solid var(--as-marine)
Style
Theme