Card

Platform  

css

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

Default vertical

Hello world

Lorem ipsum dolor sit amet

Ullamco aute ex mollit enim eu exercitation excepteur consequat laborum. Incididunt eiusmod commodo officia minim consequat enim occaecat est elit cillum. Incididunt pariatur duis ex sint. Qui aliqua pariatur cupidatat exercitation quis ea eu officia. Deserunt esse magna occaecat consectetur. Irure qui velit dolor ipsum qui cillum adipisicing reprehenderit.

Click me!

 

Loading code example. Please wait...

Horizontal

Hello world

Lorem ipsum dolor sit amet

Ullamco aute ex mollit enim eu exercitation excepteur consequat laborum. Incididunt eiusmod commodo officia minim consequat enim occaecat est elit cillum. Incididunt pariatur duis ex sint. Qui aliqua pariatur cupidatat exercitation quis ea eu officia. Deserunt esse magna occaecat consectetur. Irure qui velit dolor ipsum qui cillum adipisicing reprehenderit.

Click me!

 

Loading code example. Please wait...

Vertical reverse

Hello world

Lorem ipsum dolor sit amet

Ullamco aute ex mollit enim eu exercitation excepteur consequat laborum. Incididunt eiusmod commodo officia minim consequat enim occaecat est elit cillum. Incididunt pariatur duis ex sint. Qui aliqua pariatur cupidatat exercitation quis ea eu officia. Deserunt esse magna occaecat consectetur. Irure qui velit dolor ipsum qui cillum adipisicing reprehenderit.

Click me!

 

Loading code example. Please wait...

Horizontal reverse

Hello world

Lorem ipsum dolor sit amet

Ullamco aute ex mollit enim eu exercitation excepteur consequat laborum. Incididunt eiusmod commodo officia minim consequat enim occaecat est elit cillum. Incididunt pariatur duis ex sint. Qui aliqua pariatur cupidatat exercitation quis ea eu officia. Deserunt esse magna occaecat consectetur. Irure qui velit dolor ipsum qui cillum adipisicing reprehenderit.

Click me!

 

Loading code example. Please wait...

  Install

  CSS Classes

1. s-card

   Specify that the card has to be displayed verticaly

2. s-card:vertical

   Specify that the card has to be displayed verticaly

3. s-card:horizontal

   Specify that the card has to be displayed horizontaly

4. s-card:vertical-reverse

   Specify that the card has to be displayed verticaly reversed

5. s-card:horizontal-reverse

   Specify that the card has to be displayed horizontaly reverses