SASS SWING COMPONENTS TEMPLATE PREVIEW

Use less class as possible in your HTML. Try to just use semantic.

Now, explore, the others capabilities of Sass Swig and the use of some few classes.

Heading

Composed heading

Flexbox

Element 1
Element 2
Element 1
Element 2
Element 1
Element 2
Element 1
Element 2

Grids

1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
0
1
2
3
4
5
6
1
a
b
c
d
e
f
g
h
2
3
a
b
c
d
e
a
b
c
d
f
4
5
6

Buttons

Tables

# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

Cards

CONTENU

EN-TETE

CONTENU

PIED DE PAGE
picsum

CONTENU

picsum
EN-TETE

CONTENU

picsum
LIBELLE

CONTENU

CONTENU

PIED DE PAGE
picsum

Pagination

Collapsable

SECTION 1

Contenu section 1

SECTION 2

Contenu section 2

picsum

SECTION 3

Contenu section 3

Un composant Collaspable en ligne ? Ajoutez style="display: inline-block;" à votre label

Modals

Badges

Default Badge Primary Badge Secondary Badge Info Badge Success Badge Warning Badge Danger Badge
Default Badge Primary Badge Secondary Badge Info Badge Success Badge Warning Badge Danger Badge

Titre Badge

Titre Badge

Titre Badge

Titre Badge

Tooltips

top left right bottom
Normal Info-bulle : fit Info-bulle : small Info-bulle : medium Info-bulle : large Info-bulle : perso Info-bulle : perso
toujours visible
Lorem picsum
Lorem picsum

Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eos laboriosam placeat, quasi quibusdam quisquam sed voluptas. Accusantium asperiores delectus dolorum, hic iure maxime molestiae natus, quaerat quis sequi tempora.

Notifications

Standard

Boite de notification standard

Primary

Boite de notification standard primary

Primary

Boite de notification standard secondary

WARNING

Boite de notification warning

INFO

Boite de notification info

DANGER

Boite de notification danger

SUCCESS

Boite de notification success

Slider

image 1

SLIDE 1

image 1

SLIDE 1

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.