ūüí≥

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

image

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

2. Image

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

3. Text

only the 1st Text component

  • Set the Top¬†Margin¬†to¬†8

4. 2nd 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.

image