Info Card

In this tutorial we are going to create a Info Card.

Prerequisites:

  1. Page Section

Here below you can see an example and then we will show you how to do it yourself!

Example of Info Card design

Example of Info Card design

Tutorial

1. Click on the three dots button on the Page Section component

Start with empty Page Section and we add a Wrap Grid component inside it
Step 1 screenshot

2. Click on add…

Step 2 screenshot

3. Type "wrap"

Step 3 screenshot

4. Click on document

Step 4 screenshot

5. Click on plus symbol inside the wrap grid component

Step 5 screenshot

6. Type "info"

Step 6 screenshot

7. Click on Info card

Step 7 screenshot

8. Click on Icon…

Step 8 screenshot

9. Type "calendar"

Step 9 screenshot

10. Click on option

Step 10 screenshot

11. Click on No color selected

Step 11 screenshot

12. Click on #353895

Step 12 screenshot

13. Click on General…

Step 13 screenshot

14. Type "Calendar"

Step 14 screenshot

15. Click on Card type… and then click on Small

Step 15 screenshot

16. After adding another card, this is our end result

Step 16 screenshot