Tutorial: How to Build a Card

This tutorial will show you how to design and build a flexible card for use on your website.

We’ve put together a document with a whole bunch of examples in it to help you get started — Open example document in Elements.

4 Likes

This was very informative. I can’t tell you how many different cards I have built for my sites. Always good to see how others create them. I learnt some new tricks from this tutorial. Thank you.

I do have one question regarding a component I noticed in some of the samples called BOX. It did not appear to be a renamed container or flex, is this a new component or something else?

1 Like

Excellent, that’s what it’s all about!

Ah nuts, that is an old retired V2 component, we merged its features into the Container (they were very similar and it seemed silly to have two similar components).

Anyway, when you see BOX in the project, it can be swapped for a Container.

Have a good weekend!

Hm, my background is dark blue when I open your example project. I. might try to delete and reinstall Elements to see if that changes this dark blue issue.

Update: Nope, no luck. Still the background issue. This is driving me nuts. After copying both grids to a new container, I could set a static background color.

If you click on the dark mode and light mode icons, which are just to the right of the device breakpoint icons, your background colour will change from blue to white. Hope this helps.

1 Like

The document was initially in light mode (with the dark blue background) when it opened. After switching to dark mode nothing changed. When switching back to light mode, the background turned white finally. Thanks for the advice!