Our Module Library

This is Bldr Stndrd Edition

To develop Bldr Stndrd, we were inspired by the concept of Atomic Design. This approach enables us to build complex websites through the following hierarchy:

 

Atoms → Molecules → Organisms → Templates → Pages

 

We developed with an adaptable, scalable and easy to implement design system in mind.

Considerations:

  • This module library contains all currently available modules, including some in Beta mode.
  • Many of our modules have animation options and can be activated individually.
  • None of the modules in this library use HubDB, but many of them can be modified to use it.

Theme Style Guide

This is the basic style guide that we use to set up the theme. This can be set up in the theme settings.

Colors


Primary
(#0066FF)

Secondary
(#001A4D)

Alternate
(#CCFF00)

Dark
(#000000)

Light
(#FFFFFF)

Text styles


Jumbo

Belive

Heading 1

I believe in hope. I believe in believe.

Heading 2

Be curious, not judgmental.

Heading 3

Win or lose, do it with dignity.

Heading 4

Every day is a chance to be better than we were the day before.

Heading 5

Do you know what the opposite of love is? The opposite of love is indifference.

Heading 6

I promise you, there is something worse out there than being sad, and that’s being alone and being sad.

Paragraph

I’ve heard folks say that if you love what you do, you’ll never work a day in your life. Well, I gotta disagree. I love what I do, and I work incredibly hard.

This is a regular link example

This is a custom tag

There’s two buttons I never like hittin’, and that’s:

  • panic and
  • snooze

Blockquote

I think things come into our lives to help us get from one place to a better one.
– Ted Lasso

Table

Title Title
A1 B1
A2 B2

Buttons styles


Form styles


Input Description Text

Accordion


Title 1

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque.

Title 2

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque.

Title 3

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque.

Title 1

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque.

Title 2

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque.

Title 3

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque.

BOFU


modules

This is the title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta nunc nec est mollis, eu mattis nisl elementum. Proin venenatis turpis eget vehicula consectetur.

BOFU Cover


Lorem ipsum dolor sit amet

Nam efficitur, ligula ac accumsan porta, orci tellus aliquam libero, sit amet finibus arcu ipsum vel ex.

Learn more

Cards - Carousel


Cards - Grid


2-1.png

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

6-1.png

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

5-1.png

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

3-2.png

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

4-1.png

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

Cards - Hidden Info


Cards - Title with icon


This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

Cascading images


4-1.png Group 4.png

Company social networks


Faqs


Website

What is the importance of responsive web design?

Responsive web design ensures that a website adapts and displays properly on various devices and screen sizes, such as desktops, tablets, and smartphones. This is crucial for providing a seamless user experience and reaching a broader audience. Google also considers mobile-friendliness as a ranking factor, making it essential for search engine optimization (SEO).

How do I secure my website against cyber threats?

Website security is crucial to protect against cyber threats. Implementing HTTPS, keeping software and plugins up-to-date, using strong and unique passwords, and conducting regular security audits are essential practices. Additionally, consider employing a web application firewall (WAF) and regularly backing up your website to mitigate the impact of potential security breaches.

What is the significance of website loading speed?

Website loading speed is crucial for user satisfaction and search engine rankings. Slow-loading websites can lead to higher bounce rates and lower user engagement. Search engines like Google consider page speed as a ranking factor, impacting a site's visibility in search results. To improve loading speed, optimize images, use browser caching, minimize HTTP requests, and consider a reliable hosting provider.

Inbound

What is inbound marketing, and how does it differ from outbound marketing?

Inbound marketing is an approach focused on attracting and engaging customers through valuable content and experiences. It involves creating and sharing content that addresses the needs and challenges of your target audience, drawing them in naturally. In contrast, outbound marketing relies on traditional methods like advertising, cold calling, and direct mail to push messages to a broad audience. Inbound marketing is more customer-centric, relying on the idea of earning the audience's attention.

How can businesses effectively implement inbound marketing strategies?

Effective implementation of inbound marketing involves several key steps. Firstly, identify your target audience and create detailed buyer personas. Develop high-quality, relevant content that addresses the pain points and interests of your audience. Utilize various channels, such as blogs, social media, and email, to distribute your content. Implement SEO strategies to enhance your online visibility. Use analytics tools to measure and analyze the performance of your campaigns, adjusting strategies based on data insights. Building strong relationships and fostering engagement with your audience are essential aspects of successful inbound marketing.

Hubspot

What is HubSpot, and how does it help businesses?

HubSpot is an all-in-one inbound marketing, sales, and customer service platform. It provides tools for businesses to attract visitors, convert leads, and close customers. HubSpot's features include website and landing page creation, lead nurturing through email marketing, customer relationship management (CRM), social media management, analytics, and more. By centralizing these functions, HubSpot helps businesses streamline their marketing and sales efforts, fostering better customer engagement and growth.

How can HubSpot benefit small businesses?

HubSpot offers significant benefits to small businesses by providing a cost-effective and integrated solution for their marketing and sales needs. Small businesses can use HubSpot to create professional websites, manage customer relationships, automate marketing campaigns, and gain insights through analytics. The platform's user-friendly interface and scalability make it accessible to businesses of varying sizes. Additionally, HubSpot's education resources, including webinars and certifications, empower small business owners and marketers to enhance their skills and maximize the impact of their marketing efforts.

Featured panels


Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Form - Card


Send us a message

Hero - Slider

This module have to, ideally, use the full width section with 0px paddings and margins.


This is the title

Paragraph style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus et eros nec cursus. Aliquam ac turpis fringilla, rutrum massa non, placerat velit.

This is the title

Paragraph style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus et eros nec cursus. Aliquam ac turpis fringilla, rutrum massa non, placerat velit.

Hero - Video Background

This module have to, ideally, use the full width section with 0px paddings and margins.


Meet Bldr Stndrd

Our Design System for your Company

Icons - Cards

Two options: Icons on Top or Left


Hubspot-Platform-Consulting-Certified-1

This is a title

Contextual advertising can be profitable.

Hubspot-Delivering-Client-Success-Certified-1

This is a title

Contextual advertising can be profitable.

Hubspot-CMS-Advanced-Implementation-Certified-1

This is a title

Contextual advertising can be profitable.

Hubspot-Solutions-Partner-Certified

This is a title

Contextual advertising can be profitable.

This is a title

Contextual advertising can be profitable.

This is a title

Contextual advertising can be profitable.

This is a title

Contextual advertising can be profitable.

Infinite slider


Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified
Hubspot-Platform-Consulting-Certified-1
Hubspot-Delivering-Client-Success-Certified-1
Hubspot-CMS-Advanced-Implementation-Certified-1
Elite-HubSpot-Partner
Hubspot-Solutions-Partner-Certified

Logos - Carousel


Lottie animation

A simple integration with Lottie to place small animations on your website.


Map


Panels grid

Six different grid styles with 5, 4 or 3 panels.


Panel 1 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Learn more
Panel 2 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Learn more
Panel 3 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

Learn more
Panel 4 title
Learn more
Panel 5 title
Learn more

Pricing cards


Monthly
Yearly

Title

$19 usd

/ month - billed yearly

$199 usd

billed yearly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

  • Fusce vel nisi volutpat
  • Fringilla tortor id
  • Vehicula diam

Nam a dapibus quam, at laoreet odio. 

Learn more

Title

$19 usd

/ month - billed yearly

$199 usd

billed yearly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.

  • Fusce vel nisi volutpat
  • Fringilla tortor id
  • Vehicula diam

Nam a dapibus quam, at laoreet odio. 

Learn more

Products


generic_photo

Product Title

Short product description

$10.00 usd

generic_photo

Product Title

Short product description

$10.00 usd

generic_photo

Product Title

Short product description

$10.00 usd

generic_photo

Product Title

Short product description

$10.00 usd

generic_photo

Product Title

Short product description

$10.00 usd

generic_photo

Product Title

Short product description

$10.00 usd

RSS Feed Cards


Search input

This is using the default HubSpot search functionality


    Section Divider

    This module have to, ideally, use the full width section with 0px paddings and margins.


    Arrow down

    Arrow up

    Diagonal

    Diagonal inverted

    Gradient

    Wave

    Wave Animated

    Simple card


    Lorem ipsum

    Quisque egestas ligula in interdum finibus. Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.

    • Nullam finibus velit at odio ullamcorper tincidunt.
    • Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
    • Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.

    Simple Chart

    You have 4 options: Bar, Horizontal Bar, Pie and Doughnut


    Stats Counter


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta omnis dolorem non quidem provident assumenda possimus id.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta omnis dolorem non quidem provident assumenda possimus id.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta omnis dolorem non quidem provident assumenda possimus id.

    Steps - Cards


    1

    Card 1 title

    Contextual advertising can be profitable.

    2

    Card 2 title

    Contextual advertising can be profitable.

    3

    Card 3 title

    Contextual advertising can be profitable.

    4

    Card 4 title

    Contextual advertising can be profitable.

    Tabs

    You have 2 options: Tabs on top or left side


    6-1.png

    Quisque egestas ligula in interdum finibus.

    Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.

    • Nullam finibus velit at odio ullamcorper tincidunt.
    • Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
    • Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
    3-2.png

    Quisque egestas ligula in interdum finibus.

    Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.

    • Nullam finibus velit at odio ullamcorper tincidunt.
    • Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
    • Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
    4-1.png

    Quisque egestas ligula in interdum finibus.

    Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.

    • Nullam finibus velit at odio ullamcorper tincidunt.
    • Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
    • Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
    6-1.png

    Quisque egestas ligula in interdum finibus.

    Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.

    • Nullam finibus velit at odio ullamcorper tincidunt.
    • Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
    • Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
    3-2.png

    Quisque egestas ligula in interdum finibus.

    Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.

    • Nullam finibus velit at odio ullamcorper tincidunt.
    • Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
    • Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
    4-1.png

    Quisque egestas ligula in interdum finibus.

    Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.

    • Nullam finibus velit at odio ullamcorper tincidunt.
    • Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
    • Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.

    Team - Cards


    pexels-photo-1222271

    John Doe

    Sr. Website Strategist Learn more
    pexels-photo-733872

    Jane Doe

    Sr. Website Strategist Learn more
    pexels-photo-1239291

    Jane Doe

    Sr. Website Strategist Learn more
    pexels-photo-1212984

    John Doe

    Sr. Website Strategist Learn more

    Testimonial - Cards


    pexels-photo-1222271

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

    John Doe
    HubSpot

    pexels-photo-733872

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

    Jane Doe
    HubSpot

    pexels-photo-1239291

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

    Jane Doe
    HubSpot

    pexels-photo-1212984

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

    John Doe
    HubSpot

    Testimonial - Cards Carousel


    Testimonial - Carousel


    Video Lightbox

    You can use Youtube, Vimeo or HubSpot videos.


    generic_panoramic_photo

    Youtube

    generic_panoramic_photo

    Vimeo

    Placeholder

    HubSpot

    Schedule a Demo

    Ready to try Bldr?