This is the complete gallery of Components UI

components UI

The Master Components Gallery in Components UI

01

Hero Sections

Hero Sections are generally the first section in the project. Mix and match the elements in this sections but basically you have: Tagline, Description, Call to Action or Email form, Image, secondary CTA


Simple Hero Section

An amazing tagline for this amazing new product

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Watch the beautiful demo →


Hero Section in center

An amazing tagline for this amazing new product

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Hero Section with side image

An amazing tagline for this amazing new product

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

02

Features Sections

Feature sections is where you basically describe your product or service. Features Sections are divided depending on how many columns you’ll add


SECTION

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Second Feature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

SECTION

Three Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Feature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Second

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SECTION

Four Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Consect

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SECTION

List of features

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem

Lorem ipsum dolor

Ipsum

Lorem ipsum dolor

Shopping

Lorem ipsum dolor

Windows

Lorem ipsum dolor sit

Books

Lorem ipsum dolor

Multiple

Lorem ipsum dolor

Download

Lorem ipsum dolor

Stats

Lorem ipsum dolor sit

03

Modals Sections

Modals can be use when someone clicks on a button or to show special information in you landing page


Buy Package

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

04

Testimonials Sections

Testimonials help you showcase what your customers or users are saying about your product or service. It's a great tool to add social proof to your landing page. You can choose to show a simple testimonial or a cloud of testimonials in the same container


Simple Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

John Apple - Orangier


Colored Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

John Apple - Orangier


Avatar Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

John Apple - Orangier


Cloud Testimonials

John Doe

developer

★★★★★

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Jane Doe

ceo at agency

★★★★★

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Laura Jones

designer

★★★★★

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"

05

CTA Sections

CTA Sections - or Call To Action - are used when you want a user or customer to take action. That action can be to subscribe to your service, buy your product or whatever you consider most important in you landing page


CTA Section with underline

CTA Section with underlined theme

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


CTA Section with colored theme

Ready to buy?
Get our product today

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


CTA Section with colored theme

Ready to buy?
Get colored theme

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

06

Simple Pricing Table

Pricing tables are where you describe your product or service, highlight the features, show the price and make possible for the customer to purchase from you


Simple pricing table v1

SECTION

Simple Pricing Table (1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Paid upgrade

Simple Package

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

$22 / month

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

Consectetur adipiscing

Simple pricing table v2

SECTION

Simple Pricing Table

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Simple Package

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Dolor sit amet

Consectetur adipiscing

Magna aliqua

$22 USD

No strings attached.
Cancel anytime.

07

Footer Sections

This is usually the last section in the landing page. It can show navigation around your landing page, social profiles, contact information, privacy policy and more


Made with in El Salvador, CA
Published with Carrd

Made with in El Salvador, CA
Published with Carrd

Made with in El Salvador, CA

Published with Carrd // All rights reserved 2020

Made with in El Salvador, CA

Published with Carrd // All rights reserved 2020

company

Made with in El Salvador, CA

Published with Carrd

product

Home

Pricing

Product Overview

contact

Write us hello@company.com

Will reply in 24hrs

Call us +01 000 000 000

From 9am to 5pm - Mon Fri

08

Stats Sections

Stats sections are use to highlight important numbers in your business of product. It can show number of projects, members in your company, locations around the world


SECTION

Simple Stats

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+378

Projects

12

Members

89

Locations

SECTION

Boxed Stats

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+378

Projects
Built to date

12

Members
In our core team

89

Locations
Around the World

SECTION

Colored Stats

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+378

Projects

12

Members

89

Locations

09

Complex Pricing Tables

Complex pricing tables allow you to showcase different tiers of your product. You describe your product or service, highlight the features, show the price and make possible for the customer to purchase from you


SECTION

Two Tier Pricing

Lorem ipsum dolor sit amet, consectetur adipiscing elit

HOME

$15 / month

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

Elit

BUSINESS

$23 / month

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

Elit

Adipiscing

Consectetur adipiscing

SECTION

Three Tier Pricing

Lorem ipsum dolor sit amet, consectetur adipiscing elit

BASIC

$15 USD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

Elit

PREMIUM

$23 USD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

Elit

Adipiscing

Consectetur adipiscing

PLUS

$45 USD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

SECTION

Colored Three Tier Pricing

Lorem ipsum dolor sit amet, consectetur adipiscing elit

NEW Three Tier Pricing now

BASIC

$15 USD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

Elit

PREMIUM

$23 USD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

Elit

Adipiscing

Consectetur adipiscing

PLUS

$45 USD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

Lorem ipsum

Dolor sit amet

SECTION

Accent Three Tier Pricing

Lorem ipsum dolor sit amet, consectetur adipiscing elit

BASIC

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

$15 USD

1 Lorem ipsum

32 Dolor sit amet

5 Elit

PREMIUM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

$23 USD

12 Lorem ipsum

Unlimited Dolor sit amet

5 Elit

43 Adipiscing

Consectetur adipiscing

PLUS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor sit amet.

$45 USD

43 Lorem ipsum

Unlimited Dolor sit amet

10

Badges

Badges can be used alone or mixed with any other component. They help you put focus on an important part of your product or service


SECTION

General Badges

Lorem ipsum dolor sit amet, consectetur adipiscing elit

NEW LOW RECENT

NEW LOW RECENT

NEW LOW RECENT

NEW LOW RECENT

#upgrade

COMING SOON

Regular item

A check for items

A cross for items

SECTION

Using Badges

Lorem ipsum dolor sit amet, consectetur adipiscing elit

NEW

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

COMING SOON

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Paid upgrade

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

11

Banners

Banners can be used alone or mixed with any other component. They help you put focus on important messages regarding your product or service offer


SECTION

Display Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit

NEW This is a new item coming up

Lorem Ipsum
dolor sit amet, consectetur adipiscing elit

Lorem Ipsum
dolor sit amet, consectetur adipiscing elit

Lorem Ipsum
dolor sit amet, consectetur adipiscing elit

Lorem Ipsum
dolor sit amet, consectetur adipiscing elit

12

FAQ

Instead of answering the same question about your product or service via email or private messages, you can include a frequently asked question section to help your customers solve their doubts


SECTION

Frequently Asked Questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit

What's a question?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Second question?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Next question?

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SECTION

Complex FAQ

Frequently Asked Questions with more complex layout

What's a question

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Second question with long text in two lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

13

Content

This section is for every type of content you want to add to your landing page. For example, a Table of contents for your new eBook product


SECTION

Table of Contents

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Section one - Learning

01. Chapter one

02. Chapter two

03. Chapter three

04. Chapter four updated

05. Chapter five

06. Chapter six

07. Extra Chapter

08. Bonus Material new

09. Notes

Section Two - Building

01. Chapter one new

02. Chapter two

03. Chapter three

04. Chapter four

This is the complete gallery of Components UI