Building a responsive card
Learn how to build a responsive card that can be used in various layouts and resizes according to its parent container
- Examine your card design. Check if you’re using a rectangle or image as the background.
![](/docs/image-7518@2x.png)
- If you’re using a rectangle or image - you should instead use a frame for the background. You can copy and paste the properties such as Fill, Stroke, Border radius from the rectangle to the frame.
![](/docs/image-7519@2x.png)
Apply autolayout and constraints
- Ensure that autolayout is applied to the card. You may need to first group up and apply autolayout to inner elements so as to ensure that your design is preserved.
![](/docs/image-7520@2x.png)
- Apply width constraints such as “Fill container” to ensure the child items resizes along with the card
![](/docs/image-7516@2x.png)
- You have successfully created a responsive card for use in various layouts