Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Card Box

MyCondy

Last edited 44 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

6x Container

1x Image

4x Label

Procedure

Step 1 - create card box

Add a new Vertical Container PCF object, call it "card_frame" with this "DropShadow" property:

DropShadow.Semibold

with CENTER vertical and STRETCH horizontal alignment.

Step 2 - create top container

Add a new Horizontal Container PCF object, call it "top_frame" with this "Gap" property:

Step 3 - create content

Add a new Horizontal Container PCF object, call it "icon_frame" with this "Gap" property:

Add a new Image object under icon_frame, call it "target_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4165_37)'> <path d='M16.797 20.8731L19.6034 18.0673C16.338 16.5667 12.3401 17.1584 9.65388 19.8453C6.2075 23.2911 6.2075 28.8993 9.65388 32.3463C13.0996 35.7928 18.7085 35.7928 22.1543 32.3463C24.8405 29.6602 25.4329 25.6616 23.9323 22.3961L21.1259 25.2024C21.4033 26.8411 20.9165 28.5841 19.6544 29.8457C17.5864 31.9144 14.2219 31.9144 12.1539 29.8457C10.0859 27.7777 10.0859 24.4133 12.1539 22.3459C13.416 21.0831 15.159 20.5956 16.797 20.8731Z' fill='#7C4C99'/> <path d='M26.5478 19.7816C29.3634 24.5293 28.7332 30.7688 24.6548 34.8467C19.8292 39.6723 11.9788 39.6723 7.15384 34.8467C2.32827 30.0219 2.32827 22.1706 7.15384 17.3452C11.231 13.2673 17.4713 12.6371 22.2189 15.4522L24.7796 12.8908C18.5955 8.73236 10.1162 9.3823 4.6532 14.8445C-1.55074 21.0478 -1.55074 31.1433 4.6532 37.3466C10.8572 43.5513 20.9514 43.5513 27.1554 37.3466C32.6189 31.8837 33.2682 23.4044 29.1084 17.2196L26.5478 19.7816Z' fill='#7C4C99'/> <path d='M41.9408 6.95938C41.8087 6.61526 41.4745 6.4032 41.096 6.42043L35.3075 6.69195L35.5797 0.904158C35.5961 0.525009 35.3841 0.192127 35.0401 0.0587437C34.698 -0.0733266 34.2918 0.0217476 34.013 0.299177L27.8361 6.47662L27.5237 13.1476L16.2941 24.3764C15.7228 24.247 15.0993 24.4002 14.6541 24.8453C13.9633 25.5362 13.9633 26.6551 14.6541 27.3459C15.3443 28.0368 16.4639 28.0368 17.1548 27.3459C17.5992 26.9008 17.7532 26.2772 17.6237 25.7053L28.8526 14.4757L35.5229 14.164L41.7004 7.98575C41.9785 7.70775 42.0729 7.30276 41.9408 6.95938Z' fill='#7C4C99'/> </g> <defs> <clipPath id='clip0_4165_37'> <rect width='42' height='42' fill='white'/> </clipPath> </defs> </svg>")

Add a new Vertical Container PCF object, call it "value_frame" with this "Gap" property:

Add a new Label object under value_frame, call it "total_title" with Text property:

"Total Income"

Add a new Label object under value_frame, call it "total_value" with Text property:

"$ 2,450.00"

Add a new Vertical Container PCF object, call it "percentage_frame" with this "Gap" property:

Add a new Label object under percentage_frame, call it "percentage_value" with Text property:

"+10.5%"

Step 4 - create bottom container

Add a new Horizontal Container PCF object, call it "bottom_frame" with this "Gap" property:

Add a new Label object under bottom_frame, call it "view_all_title" with Text property:

"View all"

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

7x Frame

3x Vector

4x Text

Procedure

Step 1 - create a card frame with auto layout

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_card_frame" with these properties:

⁠

⁠

⁠

Step 2 - create a top frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_top_frame" with these properties:

⁠

⁠

Step 3 - create a top content

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_icon_frame" with these properties:

⁠

⁠

Import a new SVG file, call it "svg_target_icon" with XML code(the same SVG codes as in previous section)

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_value_frame" with these properties:

⁠

⁠

Add a new Text (T command) object under a "vercont_value_frame" frame, call it "lbl_total_title" with these properties:

⁠

⁠

Add a new Text (T command) object under a "vercont_value_frame" frame, call it "lbl_total_value" with these properties:

⁠

⁠

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_percentage_frame" with these properties:

⁠

⁠

Add a new Text (T command) object under a "vercont_percentage_frame" frame, call it "lbl_percentage_value" with these properties:

⁠

⁠

Step 4 - create a bottom content with frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_bottom_frame" with these properties:

⁠

⁠

Add a new Text (T command) object under a "horcont_bottom_frame" frame, call it "lbl_view_all_title" with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_card_frame, vercont_value_frame, vercont_percentage_frame = Vertical Container

horcont_top_frame, horcont_icon_frame, horcont_bottom_frame = Horizontal Container

svg_target_icon = Image

lbl_total_title, lbl_total_value, lbl_percentage_value , lbl_view_all_title = Label

YAML Output

⁠

Used Colours

Content Background Colour - #FFFFFF

Bottom Background Colour - #F9FAFB

Bottom Font Colour - #7F509B

Text Font Colour - #687083

SVG Frame Background Colour - #F9F1FC

⁠

← Blinking Text⁠

⁠

Counter →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.