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.



Typography

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid deserunt dolorem laboriosam laudantium mollitia neque nesciunt sequi tempore voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloremque dolores eveniet fugiat magnam optio placeat praesentium quia sint soluta. Iusto.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam blanditiis libero natus, provident quae quibusdam quos ratione.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias delectus dicta incidunt nam nobis omnis perferendis rem, voluptate. Esse explicabo modi nesciunt optio totam ullam veritatis? Accusamus aliquam commodi, corporis doloremque ea eaque facilis magni minima nemo officia possimus praesentium quae recusandae, similique, tenetur vitae voluptate? A alias aliquid amet, asperiores atque consectetur consequuntur dignissimos eveniet inventore, ipsam natus nesciunt nostrum nulla numquam optio provident, quas recusandae reiciendis saepe sequi sint unde veniam vero. At enim id illum inventore nulla officia quod suscipit. Aliquam animi aut dolor dolore ducimus exercitationem expedita explicabo facere inventore ipsa, ipsam itaque mollitia neque obcaecati odio perferendis placeat, porro quae quasi quis repudiandae saepe, tenetur ullam. Accusamus, ad adipisci animi architecto culpa delectus dicta dolore doloribus dolorum eaque eligendi ex explicabo facere fugit inventore, ipsam iste libero molestiae molestias necessitatibus neque obcaecati pariatur quam quidem rem rerum saepe sit tempora voluptate voluptates! Amet beatae dignissimos dolorem necessitatibus, quos ratione sed. Ad aspernatur atque blanditiis consequatur corporis debitis delectus deleniti deserunt dolor enim error esse eveniet expedita facilis iste laudantium libero magnam molestiae molestias nam necessitatibus, nihil nobis non odio provident quas quia quibusdam quod repellat repellendus reprehenderit repudiandae rerum similique suscipit veritatis voluptatem voluptatum. Numquam.

Heading 5

Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam sem.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eius error fuga illum laboriosam nihil qui repudiandae sequi sunt ullam. A beatae deserunt dicta dolor doloremque ea enim esse fuga iure laborum mollitia officiis pariatur possimus quae quaerat quam, quia quis quo, quod saepe sint sit tenetur ut voluptates voluptatum? Accusantium adipisci alias aliquid assumenda atque delectus dicta dolore error tempore vitae. Amet corporis deserunt dignissimos, error expedita incidunt necessitatibus nemo, quos, reprehenderit tenetur voluptates voluptatibus. Harum nisi nulla tempore.


Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolorum ducimus, exercitationem hic illum in incidunt ipsa maiores maxime, officia quas quis quod recusandae repudiandae rerum saepe sed sequi sint sit soluta veritatis, voluptate voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dicta eaque eum, exercitationem fugit mollitia nobis! At autem commodi consectetur cumque dolore eligendi illo maiores modi molestias non quae quidem, recusandae rem reprehenderit tempora vitae.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolorum ducimus, exercitationem hic illum in incidunt ipsa maiores maxime, officia quas quis quod recusandae repudiandae rerum saepe sed sequi sint sit soluta veritatis, voluptate voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dicta eaque eum, exercitationem fugit mollitia nobis! At autem commodi consectetur cumque dolore eligendi illo maiores modi molestias non quae quidem, recusandae rem reprehenderit tempora vitae.

Inline text elements

Link Bold Italic
Underline Deleted Inserted
Strikethrough Small Abbr.
Text Sub Text Sup Kbd
Mark variable Samp
Code Time = Output = 60

Custom link

Custom Link

Lists

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur.
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, fuga?
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis mollitia nostrum tempore.
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, odit!
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia.
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, possimus?
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, veritatis?
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quam suscipit temporibus.
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ut.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo!
    • Lorem ipsum dolor sit amet, consectetur adipisicing.
      1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga!
      2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, laboriosam, sed!
      3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit!
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, harum!
    • Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet, consectetur adipisicing.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, incidunt.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga!
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, laboriosam, sed!
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit!
    • Lorem ipsum dolor sit amet, consectetur adipisicing.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus distinctio non.

Blockquotes

"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam atque, ex, facere fugit, laborum molestiae odio quam reprehenderit rerum sunt vel!"
- Lorem ipsum dolor.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam atque, ex, facere fugit, laborum molestiae odio quam reprehenderit rerum sunt vel!" - Lorem ipsum dolor.

Medias

Buttons







Custom Button

Form elements

Radio buttons
Checkboxes
Switches

Custom input

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

Custom table

# 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

Accordions

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aspernatur dolore natus, nostrum odio ratione repellendus veniam? Atque eos exercitationem impedit iste necessitatibus.

Accordion 2
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga!
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, laboriosam, sed!
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit!
  • Lorem ipsum dolor sit amet, consectetur adipisicing.

Progress bar

Custom progress

Preformated text

		_____________
		< Sass Swing !>
		-------------
		       \   ^__^
		        \  (oo)\_______
		           (__)\       )\/\
		               ||----w |
		               ||     ||
      
body {
  background-color : red;
}

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

Cards

CONTENU

EN-TETE

CONTENU

PIED DE PAGE

picsum

CONTENU

picsum
EN-TETE

CONTENU

picsum
LIBELLE

CONTENU

CONTENU

PIED DE PAGE
picsum

Custom card

Custom card

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.