# Tutorial: How to Build a Card **URL:** \ **Category:** Elements\ **Created:** [January 24, 2025, 3:58pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-card/46053 "2025-01-24T15:58:20Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 24, 2025, 3:58pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-card/46053/1 "2025-01-24T15:58:20Z")
This tutorial will show you how to design and build a flexible card for use on your website. [![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/e/9e337a45f19e25e9ff00beea89f25b0b0ca2285d.jpeg "How to Build a Card") ](https://www.youtube.com/watch?v=drdouXcqwnA) We’ve put together a document with a whole bunch of examples in it to help you get started — [Open example document in Elements](elementsapp://downloadDocument/FC9mD4R3KDgI). ![screenshot](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/5/551d49ca2a44843f271e2668c401fc66a060f9e9.jpeg) ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [January 24, 2025, 9:48pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-card/46053/2 "2025-01-24T21:48:24Z")
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? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 24, 2025, 9:51pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-card/46053/3 "2025-01-24T21:51:50Z")
> [@handshaper](#): > > I learnt some new tricks from this tutorial. Thank you. Excellent, that’s what it’s all about! > [@handshaper](#): > > I noticed in some of the samples called BOX. 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! ---
**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\ **Post date:** [January 25, 2025, 8:51pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-card/46053/4 "2025-01-25T20:51:19Z")
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. ---
**Author:** ![aku](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@aku](https://forums.realmacsoftware.com/u/aku)\ **Post date:** [January 26, 2025, 7:28am UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-card/46053/5 "2025-01-26T07:28:02Z")
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. ---
**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\ **Post date:** [January 26, 2025, 10:26am UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-card/46053/6 "2025-01-26T10:26:09Z")
> [@aku](#): > > 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. 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!