This is the complete gallery of Components UI: Dark Mode
The Master Components Gallery in Components UI
TABLE OF COMPONENTS
01. Hero Sections
03. Modals
04. Testimonials updated
05. Call to Action
07. Footer
08. Stats new
10. Badges
11. Banners
12. FAQ
13. Content new
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.
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."
Joe 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
product
Home
Pricing
Product Overview
contact
Write us [email protected]
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
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: Dark Mode