Best Doors Logo

Best Doors Component Library

UI Components & Style Guide v1.0

Brand Colors

Primary Colors

Brand Red
#ED2027
Black
#000000
Grey
#545454
Light Grey
#D4D2D2

Secondary Colors

Maroon
#6F1816
Strong Red
#D54927
Dark Slate Gray
#3F616F
Cyan
#8AD2D1

Typography

Primary Font - Roboto

Clean, modern, and highly legible foundation for all digital and print communications.

Light (300) - For subtle text and captions

Light Italic - For emphasis within light text

Regular (400) - Body text and UI elements

Medium (500) - Subheadings and emphasis

Medium Italic - For quoted text

Bold (700) - Headlines (H1) and strong emphasis

Bold Italic - Special emphasis in headlines

Usage Guidelines:

  • Headlines (H1)
  • Body text
  • UI elements
  • Forms and labels
  • Digital (websites, apps, emails) and print (flyers, manuals, packaging)

Heading 1 - Bold 48px

Heading 2 - Semi-Bold 40px

Heading 3 - Semi-Bold 32px

Heading 4 - Medium 24px

Heading 5 - Medium 20px
Heading 6 - Medium 16px

Body text - Regular 16px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Serif Font - Lora

Elegant, contemporary character with excellent readability for editorial content.

Regular - For body copy in print materials

Italic - For quotes and emphasis

Medium - Subheadings in editorial content

Semi Bold - For H3, H4 headings

Bold - For H2 headings and strong emphasis

Usage Guidelines:

  • Headlines (H2, H3, H4)
  • Subheadings
  • Quotes
  • Print materials
  • Blog titles and editorial content
  • Best used in combination with Roboto for body copy

Elegant Serif Heading

Perfect for Quotes and Emphasis

"Quality garage doors and expert installation for over 50 years. We take pride in every door we install."

Secondary/Fallback Fonts

Use these when primary fonts are unavailable.

Montserrat (replaces Roboto)

Use when web fonts are not supported or for internal materials

Georgia (replaces Lora)

Use for formal documents or when custom serif fonts are unsupported

Buttons

Standard Buttons

Button Sizes

Button States

Button Links

Button Color Variations

All Buttons Have Hover Effects

✨ Hover over any button to see it lift up with a shadow effect. Click to see the press animation.

Interactive Demo

Try hovering and clicking these buttons:

Hero Banner

Premium Garage Doors

Over 50 years of excellence in Sydney

Hero Banner Alternative

Panelift® Icon Series

Shimmering Champagne finish adds elegance to any home

Forms

Standard Form

Form Validation States

✓ Perfect! This field is valid.
✕ This field is required and must be at least 10 characters.
⚠ Please enter a valid email address.
ℹ Include area code for best results.

Complete Form with Validation

✕ Please enter your full name.
✓ Email verified and available.
⚠ Please provide complete street address for delivery.
✕ Enter a valid 4-digit postcode.
✓ Service available in NSW.
ℹ Not sure? Our experts can help you choose.
⚠ Please provide more details for accurate quote.
9/500 characters
✕ You must accept the terms to continue.
Please fix the errors above before submitting.

Date & Time Pickers

ℹ Available Monday to Saturday
ℹ Business hours: 7:00 AM - 6:00 PM
✓ This time slot is available

Custom Date Range Picker

Time Slot Selector

ℹ Disabled slots are already booked

Cards

Roll-A-Door Surfmist

Roll-A-Door® Range

Space-saving roller doors with smooth, quiet operation. Available in Surfmist and other premium colors.

Learn More
Panelift Surfmist

Panelift® Doors

Premium sectional doors with maximum insulation. Shown in elegant Surfmist finish with modern appeal.

View Options
Steel-Line Sectional

Steel-Line Sectional

Contemporary Flatline design in rich Chestnut finish. Perfect for modern architectural styles.

Badges & Tags

Status Badges

NEW PENDING COMPLETE ON SALE 50+ YEARS

Alerts & Notifications

Standard Alerts

Information: We service all areas across Sydney, NSW. Our technicians are available Monday through Saturday.
Success! Your quote request has been submitted successfully. We'll contact you within 24 hours.
Warning: Annual maintenance is due for your garage door to maintain warranty coverage.
Error: Unable to process your request. Please check your information and try again.

Alerts with Icons

Business Hours Update

We're open 7:00 AM - 6:00 PM weekdays, 8:00 AM - 4:00 PM Saturdays.

Installation Complete

Your new garage door has been successfully installed. Warranty documentation has been emailed.

Limited Time Offer

20% off all roller door installations this month. Offer ends October 31st.

Service Interruption

Emergency repairs only on public holidays. Regular service resumes next business day.

Dismissible Alerts

New Product Launch: Introducing the Panelift® Icon Series with enhanced insulation.
Maintenance Reminder: Regular servicing extends the life of your garage door.

Compact Alerts

NEW Online booking system now available
Free delivery on orders over $1,000
! Stock clearance - limited quantities
× Out of stock - pre-order available

Website Section Templates

Complete section layouts based on Best Doors website, ready for implementation.

Service Areas Section

WHERE DO WE SERVICE?

Local Branches
Across QLD

Garage Door installation and Servicing.

Best Doors has locally owned branches across QLD including Brisbane, Sunshine Coast, Bundaberg, Toowoomba, Gladstone, Rockhampton, Townsville, Mackay and we also have a branch in Adelaide.

Modern garage

Features & Benefits Section

50+ Years

50+

Years Experienced

WHY CHOOSE US

What Makes Best Doors
Your Ideal Choice

Tailored solutions

One of our team will come to your home and provide advice.

Expert advice and support

We're here to help you with the perfect fit for your home.

Services List Section

2000+ Customers

2,000+

Happy Customers

WHAT SERVICE WE OFFER

50+ Years of Experience in Residential and Commercial Projects

📋

Quoting and Installation

Free measure and quote at your location.

🔧

Maintenance and Repair

Quick and efficient problem solving.

Servicing

Complete maintenance for all door types.

🏢

Commercial Projects

Shutters, roller doors and access solutions.

Product Showcase Grid

Customise Your Sectional Garage Door

to Suit Your Style

Create the perfect look for your home with our wide range of sectional door finishes. Select your panel design, choose from the extensive Colorbond®colour range and even add window inserts.

Gliderol

Gliderol Sectional Doors

B&D Panel

B&D Panel Lift Sectional Doors

B&D Icon

B&D Panel Lift Icon Sectional Doors

Steel-line

Steel-line Sectional Door

Contact Call-to-Action

Contact

Call Us

1800 066 142

Get in Touch with
The Best Doors Team

Regardless of what you're looking for, Best Doors has sectional garage doors to suit your needs. Browse the range or call us on 1800 066 142 to discuss your garage door options.

Tables

Standard Table

Product Material Warranty Price Range Installation Time
Roller Door Steel 10 Years $1,500 - $3,000 4-6 Hours
Sectional Door Aluminum 15 Years $2,000 - $4,500 6-8 Hours
Designer Door Custom 20 Years $3,500 - $8,000 1-2 Days
Timber Look Composite 12 Years $2,500 - $5,000 6-8 Hours

Striped Table with Actions

Service Type Duration Price Status Action
Installation 4-6 hours $450 - $800 Available
Repair Service 1-3 hours $150 - $400 Available
Annual Maintenance 1-2 hours $120 - $180 Limited
Emergency Repair 1-4 hours $250 - $600 24/7
Remote Upgrade 2-3 hours $350 - $500 Coming Soon

Compact Bordered Table

Color Option Code Finish Stock
Dover White DW-001 Matte
Surfmist SM-002 Satin
Monument MN-003 Matte
Shimmering Champagne SC-004 Metallic
Flatline Chestnut FC-005 Wood Grain

Modal Components

Interactive Modal Example

Click the button below to see a functional modal with overlay effect.

Modal Structure Preview

Miscellaneous Components

Progress Bars

Installation Progress

Project Completion

Grid System Example

Column 1
Column 2
Column 3

Utility Classes

The library includes utility classes for:

  • Text alignment: .text-center, .text-left, .text-right
  • Margins: .mt-0 to .mt-4, .mb-0 to .mb-4
  • Padding: .p-0 to .p-4
  • Grid layouts: .grid-2, .grid-3, .grid-4

Additional Components

Accordion

Professional installation by certified technicians with over 50 years of experience. We handle all aspects of garage door installation.

24/7 emergency repair services and scheduled maintenance to keep your garage door operating smoothly.

Comprehensive warranty coverage on all products and installations. Extended warranties available.

Avatar

JS
User
BD
TM

Tabs

Our Products

Explore our wide range of garage doors including roller, sectional, and designer options.

Toggle Switch

Email notifications
SMS updates

Search Input

Pagination

Dropdown Menu

Tooltip

Spinner / Loading

Toast Notifications

Success!

Your quote request has been submitted.

Rating

4.0 (127 reviews)

Stepper

File Upload

Slider / Range

Skeleton Loading

Empty State

No garage doors found

Try adjusting your search or filter to find the perfect door for your home.