Falcon Space типовые стили

Используйте данные стили для создания разметки своих страниц

При наведении на элемент верстки появляется кнопка получения кода HTML

Также смотрите шаблоны секций лендинга на Bootstrap 4

Цвета

primary

danger

success

info

secondary

warning

Оттенки основного цвета (светлее,темнее)

Darken-1 Darken-2 Darken-3 Darken-4 Darken-5 Normal Info Lighten-1 Lighten-2 Lighten-3 Lighten-4 Lighten-5
Darken-1 Darken-2 Darken-3 Darken-4 Darken-5 Normal Danger Lighten-1 Lighten-2 Lighten-3 Lighten-4 Lighten-5

Макет страницы

75%/25%

75%
25%

67%/33%

67%
33%

50%/50%

50%
50%

33%/67%

33%
67%

25%/75%

25%
75%

33%/33%/33%

33%
33%
33%

25%/25%/25%/25%

25%
25%
25%
25%

Тексты, заголовки

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6

Paragraph

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod.

Lead paragraph

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod.

Кнопки

Кнопка с градиентом

Кнопки с выпадающим списком

Таблицы

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Картинки

Thumbnail
Увеличение по клику
Скругленные углы
Круглая

Лайтбокс по списку картинок

Беджи


Sizes

XL
LG
SM
XS

Навигация


Сообщения, алерты




Alert с кнопкой действия и закрытия панели

Полоса прогресса

60% Complete
25%

Списки

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
  • Dapibus ac facilisis in
  • This is a primary list group item
  • This is a secondary list group item
  • This is a success list group item
  • This is a danger list group item
  • This is a warning list group item
  • This is a info list group item
  • This is a light list group item
  • This is a dark list group item

Карточки и панели

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Стандартная панель на странице

Некоторый текст
Другая панель

Иконки

Поиск иконок


Размеры иконок


Цвет иконки и граница


Float для иконки

...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Отражение и поворот иконки

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
fa-inverse

Объединение иконок

Иконка на круглом фоне

Панели показателей

  • Text

    $ 14,025

    3,78 Text

  • Text

    $ 14,025

    3,78 Text

  • Text

    $ 14,025

    3,78 Text

  • Text

    $ 14,025

    3,78 Text

Text

$ 14,025

3,78 Text

Text

$ 14,025

3,78 Text

Text

$ 14,025

3,78 Text

Text

$ 14,025

3,78 Text

14025

3,78 Text

14025

3,78 Text

14025

3,78 Text

14025

3,78 Text

14025

+14,5%

Text

14025

+14,5%

Text

14025

+14,5%

Text

14025

+14,5%

Text

14025

Text

-14%

14025

Text

+25%

14025

Text

0%

14025

Text

-10%

$14025

3,78 Text

update: 2:15 am

145+

3,78 Text

update: 2:15 am

14025

3,78 Text

update: 2:15 am

500

3,78 Text

update: 2:15 am

Title

  • Text

    1,5M

    Text 14%

  • Text

    10M

    Text 100%

  • Text

    $900

    Text 56%

  • 50+

    Text

  • 20+

    Text

  • 100+

    Text

  • 10+

    Text

Mark Walberg

  • Example 1
  • Example 1
  • Example 1

Выручка средняя, р.

67 525,00 +12,0%

неделю назад: 59 808,29

Доставка:

Самовывоз:

Ресторан:

Средний чек:

+0%

+0%

+12%

0,00

0,00

67 525,00

279,52

Среди всех пиццерий: 84 место17

1 место: Ухта-1 (234 234,45)

Среди подобных: 8 место

1 место: Самара-2 (234 234,45)
Показать рейтинг

Специальный режим - колонки row.col-xx выводятся на мобильном с горизонтальным скроллингом

Если нужна одинаковая высота колонок, то используем h-100 внутри col-xx

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quam quidem quod. Porro eos dolore culpa consequatur praesentium, corrupti reprehenderit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quam quidem quod. Porro eos dolore culpa consequatur praesentium, corrupti reprehenderit.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quam quidem quod. Porro eos dolore culpa consequatur praesentium, corrupti reprehenderit.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quam quidem quod. Porro eos dolore culpa consequatur praesentium, corrupti reprehenderit.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quam quidem quod. Porro eos dolore culpa consequatur praesentium, corrupti reprehenderit.