testpagina elementen - Topmediastore

Basic theme components

TEXT STYLES

Heading title number 1

Heading title number 2

Heading title number 3

Heading title number 4

Heading title number 5

Heading title number 6

Paragraph text

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a text in text color white style for elements with coloured backgrounds. This is a text in text color white style. This is a text in text color white style.

Font weight thinner - 200

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Font weight normal - 300

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Font weight default - 400

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Font weight bold - 600

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Font weight bolder - 800

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

List styles (basic, coloured, size)

You can use 7.000+ icons from font-awesome. Click this link for all the icons

You can include the icons in the list by selecting and copying the icon <i class=”fal fa-acorn”></i> and put fal fa-acorn in the icon class of the list component

List normal

List item
List item
List item
List item
List item
List item

List numbered

List item
List item
List item
List item
List item
List item

Icon fal fa-check

List item
List item
List item
List item
List item
List item

Icon fal fa-arrow-right

List item
List item
List item
List item
List item
List item

Icon arrow condensed

List item
List item
List item
List item
List item
List item

Light arrow list

List item
List item
List item
List item
List item
List item

Icon list + color one

List item
List item
List item
List item
List item
List item

Icon list + color two

List item
List item
List item
List item
List item
List item

Icon list + color three

List item
List item
List item
List item
List item
List item

Icon list + color four

List item
List item
List item
List item
List item
List item

Icon list + color five

List item
List item
List item
List item
List item
List item

Icon list + color six

List item
List item
List item
List item
List item
List item

Line list

List item
List item
List item
List item
List item
List item

Dashed line list

List item
List item
List item
List item
List item
List item

Dotted line list

List item
List item
List item
List item
List item
List item

Default list spacing

List item
List item
List item
List item
List item
List item

Small list spacing

List item
List item
List item
List item
List item
List item

Normal list spacing

List item
List item
List item
List item
List item
List item

Large list spacing

List item
List item
List item
List item
List item
List item

Icon list solid

List item
List item
List item
List item
List item
List item

Icon list Duotone

List item
List item
List item
List item
List item
List item

Small icon size

DEFAULT icon size

Normal icon size

Large icon size

x Large icon size

Huge icon size

Huge + color one

fal fa-phone-volume

Huge + color two

fal fa-envelope

Huge + color three

fal fa-shower

Huge + color four

fal fa-couch

Huge + color five

fal fa-bed

Huge + color six

fal fa-door-open

large + FA Light

fal fa-chart-network

large + FA Regular

far fa-chart-pie

large + FA Solid

fas fa-analytics

large + FA Duotone

fad fa-home-heart

Handy Real Estate icons

You can use 7.000+ icons from font-awesome. Click this link for all the icons. Click on the icon to go directly to an example.

Account icons

Most often used icons

Text color styles

This is a text in text color primary style. This is a text in text color primary style. This is a text in text color primary style.

This is a text in text color secondary style. This is a text in text color secondary style. This is a text in text color secondary style.

This is a text in text color tertiary style. This is a text in text color tertiary style. This is a text in text color tertiary style.

This is a text in text color light style. This is a text in text color light style. This is a text in text color light style.

This is a text in text color white style for elements with coloured backgrounds. This is a text in text color white style. This is a text in text color white style.

This is a line divider

This is a dotted divider

This is a dashed divider

Small text size

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Normal text size

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Large text size

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Huge text size

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Colors

Button color primary Button color default Button color positive Button color light Button color secondary Button color tertiary Button color Negative Button color Neutral Button color White

Variation sizes

Button primary small Button primary default Button primary large Button primary small pill Button primary default pill Button primary large pill

Variation aspects

Button default ghost Button default pill ghost Button primary ghost full width

Variation with icons

Button color primary Button color primary Button color primary

Alignments

Bekijk woningaanbod

Animations

Button color primary

Columns setup

It is possible to create different variations in column sizes between columns. The layout has a 12 column setup.

This means a general layout with 1, 2, 3, 4 or 6 columns is possible.

12/12 cols = 1 | 6/12 cols = 1/2 | 4/12 cols = 1/3 | 3/12 cols = 1/4 | 2/12 cols = 1/6

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

So you can also use a combination of 6/12 cols = 1/2 + 3/12 cols = 1/4 + 3/12 cols = 1/4

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Or you can use a combination of 4/12 cols = 1/3 + 2/12 cols = 1/6 + 2/12 cols = 1/6 + 4/12 cols = 1/3

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Default spacing between columns (+ flush, tiny, small, default, large & extra large)

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Flush spacing between columns

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Tiny spacing between columns

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Small spacing between columns

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Large spacing between columns

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Huge spacing between columns

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Equal Height and Columns Align Center

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Equal Height and Columns Align Right

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Vertical align middle + normal padding inner column

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Vertical align bottom + large padding inner column

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Background colors

Background color one

Background color two

Background color three

Background color four

Background color five

Background color six

Background color body

Background color light

Background color dark

Background color opaq light

Background color opaq dark