Demo & Component Library | PreOwnedGym.com
Get Help

Demo & Component Library

Interactive documentation of UI elements, design patterns, and functionality

CSS Variables & Global Styles

Core design tokens that power our design system

Brand Colors

--primary-color #0056b3
--secondary-color #ff7700
--accent-color #00b67a
--dark-color #1a2b49

Background & Text Colors

--light-bg #f5f7fa
--extra-light-bg #ffffff
--dark-text #2c3e50
--medium-text #546a85
--light-text #ffffff

Typography Scale

--text-xs 0.75rem (12px)
--text-sm 0.875rem (14px)
--text-base 1rem (16px)
--text-md 1.125rem (18px)
--text-lg 1.25rem (20px)
--text-xl 1.5rem (24px)
--text-2xl 1.75rem (28px)
--text-3xl 2.25rem (36px)
--text-4xl 3rem (48px)

Spacing Scale

--space-1 0.25rem (4px)
--space-2 0.5rem (8px)
--space-3 0.75rem (12px)
--space-4 1rem (16px)
--space-5 1.5rem (24px)
--space-6 2rem (32px)
--space-8 3rem (48px)
--space-10 4rem (64px)
--space-12 5rem (80px)

Border & Effects

--border-color #e2e8f0
--shadow 0 0.25rem 0.75rem rgba(0,0,0,0.08)
--hover-shadow 0 0.5rem 1.25rem rgba(0,0,0,0.12)
--transition all 0.3s ease
--border-radius 0.5rem
--card-radius 0.75rem

Typography

Text styles and headings used throughout the site

Font Families

Barlow

Primary heading font - The quick brown fox jumps over the lazy dog.

font-family: 'Barlow', sans-serif;

400 500 600 700 800

Nunito

Primary body font - The quick brown fox jumps over the lazy dog.

font-family: 'Nunito', sans-serif;

400 500 600 700

Poppins

Form & UI font - The quick brown fox jumps over the lazy dog.

font-family: 'Poppins', sans-serif;

300 400 500 600 700

Headings

Heading 1 (H1)

Font size: var(--text-4xl) - 3rem (48px)

Heading 2 (H2)

Font size: var(--text-3xl) - 2.25rem (36px)

Heading 3 (H3)

Font size: var(--text-2xl) - 1.75rem (28px)

Heading 4 (H4)

Font size: var(--text-xl) - 1.5rem (24px)

Heading 5 (H5)

Font size: var(--text-lg) - 1.25rem (20px)

Heading 6 (H6)

Font size: var(--text-md) - 1.125rem (18px)

Text Styles

Extra Small Text: The quick brown fox jumps over the lazy dog.

Class: .text-xs - Font size: var(--text-xs) - 0.75rem (12px)

Small Text: The quick brown fox jumps over the lazy dog.

Class: .text-sm - Font size: var(--text-sm) - 0.875rem (14px)

Base Text: The quick brown fox jumps over the lazy dog.

Class: .text-base - Font size: var(--text-base) - 1rem (16px)

Medium Text: The quick brown fox jumps over the lazy dog.

Class: .text-md - Font size: var(--text-md) - 1.125rem (18px)

Large Text: The quick brown fox jumps over the lazy dog.

Class: .text-lg - Font size: var(--text-lg) - 1.25rem (20px)

Extra Large Text: The quick brown fox jumps over the lazy dog.

Class: .text-xl - Font size: var(--text-xl) - 1.5rem (24px)

Dark Text: The quick brown fox jumps over the lazy dog.

Class: .text-dark - Color: var(--dark-text)

Medium Text: The quick brown fox jumps over the lazy dog.

Class: .text-medium - Color: var(--medium-text)

Light Text: The quick brown fox jumps over the lazy dog.

Class: .text-light - Color: var(--light-text)

Bold Text: The quick brown fox jumps over the lazy dog.

Class: .font-bold - font-weight: 700

Semibold Text: The quick brown fox jumps over the lazy dog.

Class: .font-semibold - font-weight: 600

Medium Weight Text: The quick brown fox jumps over the lazy dog.

Class: .font-medium - font-weight: 500

Normal Weight Text: The quick brown fox jumps over the lazy dog.

Class: .font-normal - font-weight: 400

Color System

Comprehensive color palette used throughout the site

Primary Color Family

Primary Dark #003b7a
Primary #0056b3
Primary Light #0071e6
Primary Bg #e6f0ff

Secondary Color Family

Secondary Dark #cc5f00
Secondary #ff7700
Secondary Light #ff9333
Secondary Bg #fff0e6

Accent Color Family

Accent Dark #008e5e
Accent #00b67a
Accent Light #00de94
Accent Bg #e6fff7

Gradients

Hero Gradient linear-gradient(to right, rgba(26, 43, 73, 0.9), rgba(26, 43, 73, 0.7))
Call-to-Action Gradient linear-gradient(135deg, var(--primary-color) 0%, #004494 100%)
Success Gradient linear-gradient(to right, var(--accent-color), #009e6a)

Buttons

All button styles and variations

Button Styles

Primary Button

Class: .btn .btn-primary

Secondary Button

Class: .btn .btn-secondary

Outline Button

Class: .btn .btn-outline

Large Button

Class: .btn .btn-primary .btn-lg

Disabled Button

Class: .btn .btn-primary [disabled]

Button with Icon

Class: .btn with icon inside

Hero CTA Button

Class: .hero-cta

Full Width Button

Class: .btn .btn-primary .btn-full

Button States

Default

Hover

Active

Focus

Disabled

UI Components

Key reusable components used throughout the site

Cards

Vetted Professionals

All our installation providers undergo a rigorous verification process, including background checks, skills assessment, and customer satisfaction history.

Component: Benefit Card

Professional technician installing a commercial treadmill

Cardio Equipment Installation

Professional assembly and setup of treadmills, ellipticals, exercise bikes, rowing machines, and other cardio equipment.

Starting at $149 per machine
  • Complete assembly and setup
  • Electronic calibration and testing

Component: Service Card

Featured

Fit Movers 123

Northeast Region

4.9 (305 reviews)
  • Commercial equipment specialists
  • 10+ years industry experience
Click Here

Component: Provider Card

How do you vet your installation providers?

We have a rigorous vetting process for all installation providers in our network. This includes:

  • Verification of business licenses and insurance
  • Background checks on company owners and key personnel
  • Skills assessment and technical knowledge verification

Component: FAQ Item (Active State)

Badges & Icons

Verified service providers

Component: Hero Badge

Featured

Component: Provider Badge

1

Component: Step Number

Component: Benefit Icon

Helper Widgets

Navigation Bubbles

Component: Navigation Bubbles with Tooltips

Floating CTA Button

Get Help

Component: Floating CTA Button

Scroll to Top Button

Component: Scroll to Top Button

Tooltips

Component: Custom Tooltips

Form Elements

Form controls and input styles

Input Fields

Element: Text Input

This field is required

Element: Text Input with Error

Element: Email Input

Element: Password Input

Element: Textarea

Select & Checkbox Elements

Element: Select Dropdown

Element: Custom Dropdown

Element: Checkbox

Element: Radio Buttons

File Upload Component

Drag & drop files here or click to browse
Upload up to 10 photos (max 5MB each)

Component: File Upload with Controls

JavaScript Effects & Interactivity

Interactive elements and animations used throughout the site

Accordions

FAQ Accordion Item 1

This is the content for the first FAQ item. Click the header to toggle visibility. The accordion ensures only one item is open at a time.

FAQ Accordion Item 2

This is the content for the second FAQ item. The JavaScript manages the showing/hiding of content and the rotation of the chevron icon.

FAQ Accordion Item 3

This is the content for the third FAQ item. The animation uses CSS transitions for smooth open/close effects.

JS Effect: Accordion

Modals

JS Effect: Modal Dialog

Tabs

This is the content for Tab 1. Each tab has its own content that is shown when the tab is active.

This is the content for Tab 2. JavaScript handles the tab switching behavior and active state management.

This is the content for Tab 3. The tabs component is useful for organizing content into discrete sections.

JS Effect: Tabs

Hover & Animation Effects

Card Hover Effect

Hover over this card to see the effect.

Image hover effect demo

Image Hover Overlay

Information appears on hover

JS/CSS Effects: Hover & Animations

Scroll Effects

Scroll animation element 1
Scroll animation element 2
Scroll animation element 3

JS Effect: Scroll Animations

Get Help & Support

Have questions about implementing these components? Our team is here to help.

Contact Our Design Team

© 2023 PreOwnedGym.com - Demo & Component Library v1.0