Components

Reusable UI elements built from our foundations. Use the HTML snippets provided to add them to your project.

Buttons

Buttons are used for primary actions. We have two main styles: primary (for main actions) and secondary (for outline actions).

Primary Button Secondary Button 
<a href="#" class="btn-primary">Primary Button</a>
<a href="#" class="btn-secondary">Secondary Button</a>

Cards

Cards are used to group related content. They are a flexible container with a shadow, border, and padding.

Card Title
This is some content inside a card. It's a great way to group information.
Learn More 
<div class="cards">
    <div class="cards-title">Card Title</div>
    <div class="cards-content">This is some content...</div>
    <a href="#" class="btn-primary">Learn More</a>
</div>

Forms

Styled form elements for collecting user input. Use .form-group to wrap labels and inputs for proper spacing.

Submit 
<form>
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control">
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" class="form-control" rows="3"></textarea>
    </div>
    <a href="#" class="btn-primary">Submit</a>
</form>

Alerts

Alerts are used to provide contextual feedback messages for typical user actions.

Success! Your message has been sent.
Error! Please check your form fields. 
<div class="alert alert-success">
    <strong>Success!</strong> Your message has been sent.
</div>
<div class="alert alert-danger">
    <strong>Error!</strong> Please check your form fields.
</div>