How to Create a Custom Card

Card components are a great way to organize and display information, but sometimes you may find that you need a little more flexibility outside of the available configuration options.

Luckily, most Card components can be rebuilt using Bits. In this post I’ll show you how to quickly recreate the Large Block Card in particular.

Setup

Arrange View, Image and Text components in the Layer Tree as seen in the above picture. Then, follow along with the steps below to configure each component.

1. View

  • Set the Width to 100%
  • Set the Bottom/Top Padding to 8 and Left/Right Padding to 16
    padding

2. Image

  • Set the Border Radius to Global
  • Set the Width to 100%
  • Set the Height to 200

3. Text

  • Set the Top Padding to 8

4. View

  • Set Flex Direction to Row
  • Set the Width to 100%
  • Set the Bottom/Top Padding to 8
  • Set Justify Content to Space Between

Once you’ve finished building your card, you can save it for re-use throughout your project by saving the top-level View as a Custom Block.

custom%20card

1 Like