Cards
Card is one of most used components of bootstrap css library. It let you to show related content in similar and grouped way.
We provide a powerful widget which let you to write really many kind of cards. In this page we also dimostrate some animation capabilities of flatstep.
In the source code ho this page we have also some comments about structure of pages.
Gallery
Simple list of cards with the same size and gallery enabled, with some extra classes.
Click on images to see the gallery.
Ipsum sunt
Enim ad aliquip sint exercitation culpa laborum laborum proident.
dolore laborum
Magna eiusmod do ad consequat eiusmod commodo.
labore mollit
Ullamco proident non commodo sint consequat Lorem pariatur qui adipisicing commodo.
dolore laborum
Magna eiusmod do ad consequat eiusmod commodo.
Parallax background
In this case we have a special envelope with a parallax background image in a container-fluid, with style for minimum-height.
We have a left empty column to set text aligned to right. The card with caption has some style
Cards are set to be var_height, but in this case is unused because we have only one card.
dolore laborum
Magna eiusmod do ad consequat eiusmod commodo.
- eiusmod do ad
- consequat eiusmod
- eiusmod commodo
Some card features
This (ugly) card widget show some features of cards.
- the style property can set style for various components of the card
- each card can have this own width and its own class
- some classes can be shared with all cards
- bootstrap breakpoint can be set in one of: xs sm md lg xl xxl
- gutters and padding can be changed, but often the default is ok
- each card is vertical by default but can be set horizontal
Images places
Top and bottom images in vertical and horizontal cards with squared and rounded shapes.
Ipsum sunt
Enim ad aliquip sint exercitation culpa laborum laborum proident.
dolore laborum
Magna eiusmod do ad consequat eiusmod commodo.
Ipsum sunt
Angela
Enim ad aliquip sint exercitation culpa laborum laborum proident.
dolore laborum
Albert
Magna eiusmod do ad consequat eiusmod commodo.
Icons
Cards with icons and various properties.
The envelope change the background color of the container-fluid.
Note the different animation, the html text of the header and the list of items of the last card.
dolore laborum
Ullamco proident non commodo sint consequat Lorem pariatur qui adipisicing commodo.
An item
Enim ad aliquip sint exercitation culpa laborum
- A second item
- A third item
Rounded images
Cards with rounded image, envelope with fixed background image and some transparency.Ipsum sunt
Sonia
Enim ad aliquip sint exercitation culpa laborum laborum proident.
dolore laborum
Robert
Magna eiusmod do ad consequat eiusmod commodo.
labore mollit
Lucy
Ullamco proident non commodo sint consequat Lorem pariatur qui adipisicing commodo.
Horizontal
Horizontal cards with different sizes and styles, note the different size of horizontal images.
Lucy
Ullamco proident non commodo sint consequat Lorem pariatur qui adipisicing commodo.
Paul
Enim ad aliquip sint exercitation culpa laborum laborum proident.
dolore laborum
Victor
Magna eiusmod do ad consequat eiusmod commodo.