Settings

Kitchen Sink

Včetně přehledu stylování prvků na webu (style guide)

OBECNÉ PRVKY

BARVY

Primary

#0054a6

Secondary

#56bffd

Success

#3adb76

Warning

#ffae00

Alert

#ec5840

White

#fff

Black

#000

FONTY

Roboto Light (300)

Roboto Regular (400)

Roboto Medium (500)

Roboto Bold (700)

NADPISY

Nadpis 1 (h1)

Nadpis 2 (h2)

Nadpis 3 (h3)

Nadpis 4 (h4)

Nadpis 5 (h5)
Nadpis 6 (h6)

Odstavce

p.text-left

Zarovnání doleva. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.


p.text-center

Zarovnání nastřed. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.


p.text-justify

Zarovnání do bloku. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.


p.text-right

Zarovnání doprava. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.

ODKAZY

a odkaz

TLAČÍTKA

Buttons:
.button (.tiny/.small/-/.large/.secondary/.success/.alert/.expanded) Tiny button Small button Classic button Large button Secondary Success Alert button Expanded button
Button group:
One Two Three

SEZNAMY

  • List item 1
  • List item 2
  • List item 3
  • Nested list
    • List item 1
    • List item 2
    • List item 3
  1. List item
  2. List item
  3. List item
  4. Nested item
    1. List item
    2. List item
    3. List item

FORMULÁŘE


Radios:
Checkboxy:
Selectboxy:

ZÁKLADNÍ KOMPONENTY FOUNDATIONU

BADGES

Badges:
1 2 3 A B

ACCORDION

ORBIT

  • This is dodgerblue. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • This is rebeccapurple. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • This is darkgoldenrod. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

PROGRESS BAR

25%

50%

75%

100%

SLIDER

SWITCH

TABLE

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

TABS

One

Check me out! I'm a super cool Tab panel with text content!

Two

Three

Check me out! I'm a super cool Tab panel with text content!

TOOLTIP

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.

LAYOUT COMPONENTY

GRID

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

CUSTOM KOMPONENTY