Colors

white
black
surface
teb-blue-50
teb-blue-100
teb-blue-200
teb-blue-300
teb-blue-400
teb-blue-500
teb-blue-700
teb-blue-800
aqua-50
aqua-100
aqua-200
aqua-300
aqua-400
aqua-500
aqua-700
aqua-800
red-50
red-100
red-200
red-300
red-400
red-500
red-700
red-800
violet-50
violet-100
violet-200
violet-300
violet-400
violet-500
violet-700
violet-800
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-700
blue-800
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
green-50
green-100
green-200
green-300
green-400
green-500
green-700
green-800
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-700
gray-800

Icons

empty
spinner
logo
logo-liceum
logo-technikum
logo-liceum-plastyczne
logo-edukacja-domowa
link-arrow
cross
loupe
menu
minus
plus
check
tick
tick-circle-fill
cross-circle-fill
tick-circle
info-circle
email
phone
play
video
camera
laptop
hammer
lab
painting
danger
send
share
clock
download
attachment
doc
settings
edit
location
chevron-up
chevron-down
chevron-left
chevron-right
arrow-up
arrow-down
arrow-left
arrow-right
small-arrow-right
facebook
instagram
youtube
tiktok
digit-1
digit-2
digit-3
digit-4
digit-5
digit-6

Typo

Body (Proxima Nova)

Regular (400/normal)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aącćeęlłnńoósśzźż AĄCĆEĘLŁNŃOÓSŚZŹŻ

Semibold (600/semibold)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aącćeęlłnńoósśzźż AĄCĆEĘLŁNŃOÓSŚZŹŻ

Bold (700/bold)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aącćeęlłnńoósśzźż AĄCĆEĘLŁNŃOÓSŚZŹŻ

Display (Roc Grotesk)

Regular (400/normal)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aącćeęlłnńoósśzźż AĄCĆEĘLŁNŃOÓSŚZŹŻ

Medium (500/medium)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aącćeęlłnńoósśzźż AĄCĆEĘLŁNŃOÓSŚZŹŻ

Bold (600/bold)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aącćeęlłnńoósśzźż AĄCĆEĘLŁNŃOÓSŚZŹŻ

Badges

Default Default Button Special Special button Liceum Liceum plastyczne Technikum Edukacja domowa

Tags

Tag 1 Tag 2 Tag 3

Buttons

Inline

Component

With Icon

Icon Only

Disabled

Tabs (TabsButtons)

Carousel Indicator (SliderDots)

sliderDots

sliderDots (theme: light)

sliderDots (theme: grey)

CourseButton

courseButton

Stylizacja i wizerunek Projektowanie gier Publikacje multimedialne FLEX (wybierz przedmioty)

courseButton (theme: light)

Stylizacja i wizerunek Projektowanie gier Publikacje multimedialne FLEX (wybierz przedmioty)

Infobox

infobox (theme: light)

Info title example

Content example: Nulla morbi hendrerit sit odio adipiscing neque proin sit ut. Sapien sit et malesuada nibh ultrices mauris sed congue.

Button Button Button

infobox (theme: dark)

Info title example

Content example: Nulla morbi hendrerit sit odio adipiscing neque proin sit ut. Sapien sit et malesuada nibh ultrices mauris sed congue.

Button Button Button

Input

Web Component

Etykieta pola Etykieta pola Prefix Suffix Etykieta pola Etykieta pola Prefix Suffix Rozszerzona etykieta pola Domyślnie wpisana wartość

Native

Default

Disabled

Textarea

Web Component

Etykieta pola Rozszerzona etykieta pola Domyślnie wpisana wartość

Native

Default

Disabled

Select

Web Component

Etykieta pola Etykieta pola Prefix Etykieta pola Etykieta pola Prefix Rozszerzona etykieta pola Domyślnie wybrana opcja

Multiple

Etykieta pola Etykieta pola Prefix Etykieta pola Etykieta pola Prefix Rozszerzona etykieta pola Domyślnie wybrana opcja

Mix

Singe with search Multiple with search Singe with search start Multiple with search start

Native

Default

Disabled

Checkbox

Radio

Switch

Radio button

Radio button group

Radio button group

Radio buttons wc

Form

Testowy single select
Testowy multiple select
Imię
Wiadomość

Breadcrumbs

Scrollbar (CustomScroll)

1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam.

2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam.

3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam.

1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam.

2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam.

3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui harum, earum doloribus alias tempore libero molestias aliquid nemo rerum repudiandae tenetur, inventore iusto eum facere fugiat aliquam? Harum, temporibus quibusdam.

Video modal

Popup modal

Sidebar modal

Tooltip modal