Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maiores omnis eaque numquam repellendus aperiam quia nulla porro quod ad quam iste dignissimos dolore labore reiciendis inventore fuga unde, nobis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur eligendi quidem recusandae? Ratione officia maxime odio corporis dolorum! Nostrum numquam rerum repellendus assumenda unde porro eos beatae deserunt soluta itaque.

@code

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, maiores omnis eaque numquam repellendus aperiam quia nulla porro quod ad quam iste dignissimos dolore labore reiciendis inventore fuga unde, nobis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur eligendi quidem recusandae? Ratione officia maxime odio corporis dolorum! Nostrum numquam rerum repellendus assumenda unde porro eos beatae deserunt soluta itaque.

@endcode

Lists

Unordered list

@code @endcode

Ordered list

  1. Example 1
  2. Example 2
  3. Example 3
@code
  1. Example 1
  2. Example 2
  3. Example 3
@endcode

Tables

Example title 1 Example title 2
11лв. Example text
20лв. Example text
Example text Example text
Example text Example text
@code
Example title 1 Example title 2
11лв. Example text
20лв. Example text
Example text Example text
Example text Example text
@endcode

Table full width

Example title 1 Example title 2
Example text Example text
Example text Example text
Example text Example text
Example text Example text
@code
Example title 1 Example title 2
Example text Example text
Example text Example text
Example text Example text
Example text Example text
@endcode

Table striped

Example title 1 Example title 2
Example text Example text
Example text Example text
Example text Example text
Example text Example text
@code
Example title 1 Example title 2
Example text Example text
Example text Example text
Example text Example text
Example text Example text
@endcode

Pagination

@code @endcode

Breadcrumbs

@include('partials.breadcrumbs') @code @include('partials.breadcrumbs') @endcode

Buttons

button primary button secondary button warning button danger button outline button disabled button link
@code button primary button secondary button warning button danger button outline button disabled button link @endcode

Button size

button small button normal button medium button large
@code button small button normal button medium button large @endcode

Block level buttons

button primary button secondary @code button primary button secondary @endcode

Button groups

button primary button secondary button primary button secondary button primary button secondary button primary button secondary button primary button secondary
@code
button primary button secondary button primary button secondary button primary button secondary button primary button secondary button primary button secondary
@endcode

Forms

Input type text

@code
@endcode

Text Area

@code
@endcode

Select

@code
@endcode

Errors

@code
@endcode

Disabled state

@code
@endcode

Radio buttons

Form heading
@code
Form heading
@endcode

Checkbox

@code
@endcode

Grid

прочети документацията »
col-xs-12 col-lg-4
col-xs-12 col-lg-4
col-xs-12 col-lg-4
col-3
col-6
col-3
col-2
col-8
col-2
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
@code
col-xs-12 col-lg-4
col-xs-12 col-lg-4
col-xs-12 col-lg-4
col-3
col-6
col-3
col-2
col-8
col-2
col-3
col-8
col-4
col-8
col-5
col-7
col-6
col-6
@endcode

Slider

@include ("partials.slide", [ "title" => "Тестово заглавие", "subtitle" => "Това е подзаглавие на тестово заглавие", "horizontal" => "left", "vertical" => "top", "image" => "http://fantastictoursmalta.com/wp-content/uploads/2017/02/fantastic-tours-malta-Calabria-2017.jpg", "mob_image" => "http://fantastictoursmalta.com/wp-content/uploads/2017/02/fantastic-tours-malta-Calabria-2017.jpg", "buttons" => [ [ "text" => "Първи бутон", "style" => "primary", "link" => "#" ], [ "text" => "Втори бутон", "style" => "secondary", "link" => "#" ], [ "text" => "Трети бутон", "style" => "outline", "link" => "#" ] ] ])
@include ("partials.slide", [ "title" => "Тестово заглавие", "subtitle" => "Това е подзаглавие на тестово заглавие", "horizontal" => "center", "vertical" => "center", "image" => "https://tinyurl.com/ya3clxs5", "mob_image" => "https://tinyurl.com/ya3clxs5", "buttons" => [ [ "text" => "Виж почивките", "style" => "primary", "link" => "#" ], [ "text" => "Втори бутон", "style" => "secondary", "link" => "#" ], [ "text" => "Трети бутон", "style" => "outline", "link" => "#" ] ] ])
@include ("partials.slide", [ "title" => "Тестово заглавие", "horizontal" => "left", "vertical" => "center", "image" => "https://tinyurl.com/ya3clxs5", "mob_image" => "https://tinyurl.com/ya3clxs5", "buttons" => [ [ "text" => "Трети бутон", "style" => "outline", "link" => "#" ] ] ])
‹
›
@code
@@include ("partials.slide", [ "title" => "Тестово заглавие", "subtitle" => "Това е подзаглавие на тестово заглавие", "horizontal" => "left", "vertical" => "top", "image" => "http://fantastictoursmalta.com/wp-content/uploads/2017/02/fantastic-tours-malta-Calabria-2017.jpg", "mob_image" => "http://fantastictoursmalta.com/wp-content/uploads/2017/02/fantastic-tours-malta-Calabria-2017.jpg", "buttons" => [ [ "text" => "Първи бутон", "style" => "primary", "link" => "#" ], [ "text" => "Втори бутон", "style" => "secondary", "link" => "#" ], [ "text" => "Трети бутон", "style" => "outline", "link" => "#" ] ] ])
@@include ("partials.slide", [ "title" => "Тестово заглавие", "subtitle" => "Това е подзаглавие на тестово заглавие", "horizontal" => "center", "vertical" => "center", "image" => "https://tinyurl.com/ya3clxs5", "mob_image" => "https://tinyurl.com/ya3clxs5", "buttons" => [ [ "text" => "Виж почивките", "style" => "primary", "link" => "#" ], [ "text" => "Втори бутон", "style" => "secondary", "link" => "#" ], [ "text" => "Трети бутон", "style" => "outline", "link" => "#" ] ] ])
@@include ("partials.slide", [ "title" => "Тестово заглавие", "horizontal" => "left", "vertical" => "center", "image" => "https://100daysofsunshineblog.files.wordpress.com/2015/02/marasusa-tropea-italy.jpg", "mob_image" => "https://100daysofsunshineblog.files.wordpress.com/2015/02/marasusa-tropea-italy.jpg", "buttons" => [ [ "text" => "Трети бутон", "style" => "outline", "link" => "#" ] ] ])
@endcode

Utility

Class name CSS Properties
.no-user-select @code -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; @endcode
.clearfix:after,
.columns:after 		@code content: ""; display: block; clear: both; @endcode
.left @code float: left; @endcode
.right @code float: right; @endcode
.text-left @code text-align: left; @endcode
.text-right @code text-align: right; @endcode
.text-center @code text-align: center; @endcode
.text-justify @code text-align: justify; @endcode
.text-primary @code color: $text; @endcode
.text-secondary @code color: $text-secondary; @endcode
.text-uppercase @code text-transform: uppercase; @endcode
.text-lowercase @code text-transform: lowercase; @endcode
.pd-0 @code padding: 0 !important; @endcode
.pd-t-0 @code padding-top: 0 !important; @endcode
.pd-b-0 @code padding-bottom: 0 !important; @endcode
.pd-l-0 @code padding-left: 0 !important; @endcode
.pd-r-0 @code padding-right: 0 !important; @endcode
.m-t-0 @code margin-top: 0 !important; @endcode
.m-b-0 @code margin-bottom: 0 !important; @endcode
.m-l-0 @code margin-left: 0 !important; @endcode
.m-r-0 @code margin-right: 0 !important; @endcode
.nowrap @code white-space: nowrap; @endcode
.container @code width: 100%; padding: $gutter; margin-left: auto; margin-right: auto; @endcode
.container--max-width @code max-width: $max-container; @endcode
.container--wrapper @code display: flex; @endcode

Misc

Floating buttons

♠
♠
@code
♠
♠
@endcode

Popup

Show popup
@code Show popup @endcode
@include ("partials.popup")