Email Support Buddy

Living Styleguide

Typography

Heading 1

Gradient H1

Heading 2

Heading 3

Heading 4

This is a regular paragraph. Use it to explain benefits, describe features, or tell a story. Keep it concise and focused on the value proposition.

This is smaller text, useful for captions or less critical details.

"This is a blockquote, perfect for testimonials or highlighting key phrases."
  • Unordered List Item 1
  • Unordered List Item 2

Buttons

Standard Buttons

Use these for primary actions that affect the system state.

Buttons as Links

Use these for less prominent actions or navigation disguised as buttons.

Form Elements

Please provide a valid entry.

Form Examples

Simple Contact Form

Project Creation Form

Basic Information

Team Members

Project Settings

Notification Preference

Table

Name Title Status Role
Jane Cooper Regional Paradigm Technician Active Admin
Cody Fisher Product Directives Officer Pending Member

Status Badges

Simple Status Badges

Success Warning Error Info Neutral

Status Badge Examples

Completed For successful or completed states
In Progress For ongoing or pending states
Failed For error or failure states
Processing For informational states
Archived For neutral or archived states

Cards

Simple Card

This is card content demonstrating a basic card layout.

Icon Card

Visually represent a concept or feature.

"This new style looks great!"

- Happy Developer

Card with Image

This is extended card content stacked vertically below the image placeholder. The text can span multiple lines.

Pagination

Showing 1 to 10 of 97 results

Alerts

Success Alert

Success! Your request was processed.

Warning Alert

Warning: Please check your input.

Danger Alert

Error! Something went wrong.

Info Alert

Info: This is an informational message.

Alert with Title & Body

Successful Operation

The data was saved successfully. All changes have been updated.

Error Occurred

A critical error occurred. Changes could not be saved.

Loading…
Loading the web debug toolbar…
Attempt #