Typography (Automatic Styling)

Standard HTML elements get automatic styling - no classes needed

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Component Title

Heading 5 - Small Title

Heading 6 - Minor Title

This is a standard paragraph with automatic styling. It includes proper line height, color, and spacing that matches the Klipboard brand guidelines. You can also include links that are automatically styled with the brand colors.

                <h1>Heading
                1</h1>
                <h2>Heading
                2</h2>
                <p>Paragraph
                with <a href="#">link</a></p>
            

Manual Typography Classes

When you need to apply heading styles to other elements

Manual H1 Style on DIV

Manual H2 Style on DIV

Manual H3 Style on DIV

Manual paragraph style on DIV

Manual link style on SPAN

                <div class="kb-heading-1">Manual H1 Style</div>
                <span class="kb-link">Manual link style</span>
            

Buttons

Complete button components with hover effects, focus states, and responsive behavior

Standard Buttons

Default Button Primary Button Outline Button

Buttons with Arrows (add kb-button-arrow class)

Default Button Primary Button Outline Button

Button Sizes

Large Button Large with Arrow Small Button Small with Arrow

Learn More Link (automatic arrow)

Learn More Link

                
                <a href="#" class="kb-button">Default Button</a>
                <a href="#" class="kb-button-primary">Primary
                Button</a>

                <a href="#" class="kb-button kb-button-arrow">Button with Arrow</a>
                <a href="#" class="kb-button-outline kb-button-arrow">Outline with Arrow</a>

                <a href="#" class="kb-learn-more">Learn More
                Link</a>

Cards

Complete card components with hover animations and proper spacing

Standard Cards

Service Card

This is a standard card with automatic hover effects, shadows, and responsive behavior. Perfect for service listings, product features, or content previews.

Learn More

Feature Card

Cards automatically maintain equal heights in grids and include proper spacing for content hierarchy.

Explore Feature

Solution Card

All hover effects, transitions, and responsive behavior are built-in.

Get Started

Compact Cards

Quick Info

Compact cards for smaller content areas

Stats

Perfect for statistics or brief information

Features

Smaller footprint with same functionality

Benefits

Responsive and accessible

Icon Cards

🚀

Fast Performance

Lightning-fast performance with optimized code and efficient algorithms that scale with your business needs.

🔒

Secure & Reliable

Enterprise-grade security with 99.9% uptime guarantee and comprehensive data protection measures.

                <div class="kb-card">
                <h3>Card
                Title</h3>
                <p>Card
                description</p>
                <a href="#" class="kb-button">Action</a>
                </div>

                <div class="kb-icon-card">
                <div class="icon"><img src="icon.svg" alt="Icon"></div>
                <div class="content">
                <h3>Title</h3>
                <p>Description</p>
                </div>
                </div>
            

Grid Layouts

Responsive grid systems that automatically adapt to mobile devices

2 Column Grid

Column 1

Content in first column

Column 2

Content in second column

3 Column Grid

Column 1

Three column layout

Column 2

Responsive behavior

Column 3

Mobile-friendly

4 Column Grid

Column 1

Four columns

Column 2

Auto-responsive

Column 3

Equal heights

Column 4

Perfect spacing

                <div class="kb-grid-3">
                <div>Column
                1</div>
                <div>Column
                2</div>
                <div>Column
                3</div>
                </div>
            

Hero Section

Pre-built hero layout with responsive 2-column design

Transform Your Business Today

Discover powerful solutions that drive growth, increase efficiency, and deliver exceptional results for your organization. Join thousands of satisfied customers worldwide.

Get Started Free Watch Demo

                <div class="kb-hero-grid">
                <div>
                <h1>Hero
                Title</h1>
                <p>Hero
                description</p>
                <a href="#" class="kb-button-primary">Primary
                CTA</a>
                <a href="#" class="kb-button-outline">Secondary
                CTA</a>
                </div>
                <div>
                <img src="hero-image.jpg" alt="Hero">
                </div>
                </div>
            

Complete Section Example

This section uses kb-section class with built-in padding and responsive behavior

Our Services

Comprehensive solutions designed to meet your business needs and exceed your expectations

Consulting

Expert guidance to help you make informed decisions and optimize your business processes.

Learn More

Implementation

Seamless deployment of solutions with minimal disruption to your existing operations.

Learn More

Support

24/7 technical support and maintenance to keep your systems running smoothly.

Learn More

                <section class="kb-section">
                <div class="kb-section-header">
                <h2>Section
                Title</h2>
                <p>Section
                description</p>
                </div>
                <!-- Content here -->
                </section>
            

Form Elements

Complete form styling with focus states and validation support

                <input type="text" class="kb-input" placeholder="Enter text">
                <textarea class="kb-textarea" placeholder="Enter message"></textarea>
                <button class="kb-form-submit">Submit
                Form</button>
            

Responsive Behavior

All components automatically adapt to different screen sizes

📱 Mobile-First Design

Grids collapse to single column on mobile devices
Text sizes scale appropriately for readability
Button and card padding adjusts for touch interfaces
Hero sections stack vertically on smaller screens
No additional classes needed - everything is automatic

Tip: Resize your browser window to see the responsive behavior in action!

Usage Guidelines

Best practices for content editors

✅ Do This

Use one class per element for complete styling
Let standard HTML elements (h1, h2, p, a) use automatic styling
Trust the responsive behavior - no extra classes needed
Use semantic HTML structure
Keep content organized in sections

❌ Avoid This

Don't combine multiple utility classes
Don't override styles with inline CSS
Don't add responsive classes manually
Don't nest components unnecessarily
Don't skip semantic HTML structure