UI Components
The code::core component library provides pre-built, consistently styled UI elements for all brand communications. These components are designed for consistency, accessibility, and ease of implementation.
Each component is documented with usage guidelines, states, and code examples. Use these components to maintain brand consistency across all digital products.
Buttons
Primary call-to-action elements. Use for forms, navigation, and direct user interactions.
Button Examples
<!-- Primary --> <button className="btn btn-primary">Action</button> <!-- Secondary --> <button className="btn btn-secondary">Secondary</button> <!-- Gold Accent --> <button className="btn btn-gold">Special</button> <!-- Sizes --> <button className="btn btn-primary btn-sm">Small</button> <button className="btn btn-primary btn-lg">Large</button>
Badges
Small labels for tags, status indicators, and categorization.
Badge Examples
<span className="badge badge-blue">Primary</span> <span className="badge badge-gold">Accent</span> <span className="badge badge-green">Success</span>
Cards
Container components for organizing related content and information.
Feature Title
Brief description of the feature or content. Keep it concise and actionable.
Premium Feature
Highlight important features with gold accents for visual interest.
Verified
Use semantic colors for status and feedback communication.
Card Examples
<div className="card">
<div style={{ padding: '24px' }}>
<h3>Card Title</h3>
<p>Card content goes here</p>
</div>
</div>Alerts
Status messages and feedback for user actions.
Alert Examples
<div className="alert" style={{...}}>
<span className="material-icons-round">info</span>
<div>
<div style={{ fontWeight: '600' }}>Title</div>
<div>Message text</div>
</div>
</div>Spacing System
Consistent spacing values for layouts and component spacing.