Cards
Why cards?
Cards will most probably be around for a long time - why cards are the future of the web. They work great in terms of usability, are easy to implement and quite effective on conveying the message. If you haven't already used a card before in your projects, it is certain that you have already interacted with one, so it's time for you to start taking advantage of them in your projects.
Single colored cards
There are simple cards with a plain background color. They are great for displaying counters on dashboards or making side sections on your screens.
Target goals
76% of goals achieved
Target goals
76% of goals achieved
Target goals
76% of goals achieved
Target goals
76% of goals achieved
Target goals
76% of goals achieved
Target goals
76% of goals achieved
Target goals
76% of goals achieved
Target goals
76% of goals achieved
Target goals
76% of goals achieved
How to build your single colored cards?
Build cards is extremely simple to use, just add a container to you screen and set the desired width using the OutSystems grid. Add the style "Card" to it and you have your first card built. If you want to color it, there are already some predefined colors: Blue, Red, Green, DarkGray, Gray and White which you can put in front of your card style: "Card Blue".
Style: Card Gray
Width: 4 Col
Cards with title
You can easily create cards with titles by stacking simple colored cards. Cards with titles are useful if you want to display a set of information that require a title, like a graph or a top 10 best employee list, for instance.
Top 10 employees
1. Ferdinand Sundstrom
2. Grisel Vessels
3. Kent Candler
4. Sharon Lovings
5. Lean Kuhlman
6. Rosia Patao
7. Halley Meaney
8. Gena Effinger
9. Lonny Wilburn
10. Nga Barefield
Top 10 employees
1. Ferdinand Sundstrom
2. Grisel Vessels
3. Kent Candler
4. Sharon Lovings
5. Lean Kuhlman
6. Rosia Patao
7. Halley Meaney
8. Gena Effinger
9. Lonny Wilburn
10. Nga Barefield
Top 10 employees
1. Ferdinand Sundstrom
2. Grisel Vessels
3. Kent Candler
4. Sharon Lovings
5. Lean Kuhlman
6. Rosia Patao
7. Halley Meaney
8. Gena Effinger
9. Lonny Wilburn
10. Nga Barefield
Width: 4 col
Style: Card Blue
Style: Card White
Margin Top: 0px
How to build your cards with title?
If you already know how to do cards from the first example - Single Colored Cards - these ones are not harder to do, just add two containers inside an outer one.

The outer container will set the card width, for example 4 columns, while the two containers inside will be the title and the content of the card with the width set to (fill parent).
Image cards
By now you already have a pretty idea on how card works, so it's time to make them a little more attractive. The same way you are able to add a colored title to your cards, you can also add some nice images and make them stand out a little more. These image cards work great for product lists or to highlight certain products or news in a screen.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
How to build your image cards?
Cards with images are as easy to build as cards with titles, but instead of adding the Card style to the top container, just place your images inside of it. Remember to put the outer container to set the card width and keep the ones inside to width: (fill parent).

  Images are set by default to occupy the width of the enclosing containers and keeping their aspect ratio (width: 100%; height: auto) so you don't even have to concern about resizing them, but be careful about the size of the image files, by making the images smaller on your screens doesn't mean that the user won't have to download the original image files (and sizes).
Width: 4 col
(drop your image here)
Style: Card White
Margin Top: 0px
Advanced cards
You can easily evolve the cards accordingly to your project needs. There are tons of examples about cards on the web which you can get as an inspiration for building your own ones.
2 COMMENTS
Look at me doing fancy cards for my own project
By John Doe at 3:00a
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2 COMMENTS
Look at me doing fancy cards for my own project
By John Doe at 3:00a
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2 COMMENTS
Look at me doing fancy cards for my own project
By John Doe at 3:00a
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Click here to see your activities