Skip to content
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create a stage box
Add a new Vertical Container PCF object, call it "Stage_Box_frame" with this "DropShadow" property:
DropShadow.Semibold
Step 2 - create a header container
Add a new Horizontal Container PCF, call it "Header_stage_frame" with this "Gap" property:
10
And Label object under "Header_stage_frame", call it "title_stage" with Text property:
"Order is shipping"
And Label object under "Header_stage_frame", call it "date_stage" with Text property:
Text(Today(),"mmm dd,yyyy")
Step 3 - create a content container
Add a new Horizontal Container PCF, call it "Content_stage_frame" with this "Gap" property:
10
And Image object under "Content_stage_frame", call it "flag_icon" with Image property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M3 3.24854C3 3.04962 3.07902 2.85886 3.21967 2.7182C3.36032 2.57755 3.55109 2.49854 3.75 2.49854H20.254C20.3933 2.49854 20.5298 2.53732 20.6483 2.61055C20.7668 2.68377 20.8625 2.78855 20.9248 2.91313C20.9871 3.0377 21.0135 3.17717 21.001 3.31589C20.9885 3.45461 20.9376 3.58711 20.854 3.69854L16.69 9.24954L20.854 14.8015C20.9376 14.913 20.9885 15.0455 21.001 15.1842C21.0135 15.3229 20.9871 15.4624 20.9248 15.5869C20.8625 15.7115 20.7668 15.8163 20.6483 15.8895C20.5298 15.9628 20.3933 16.0015 20.254 16.0015H4.5V20.7505C4.49999 20.9318 4.43436 21.1069 4.31523 21.2435C4.19611 21.3801 4.03155 21.4689 3.852 21.4935L3.75 21.5015C3.56876 21.5015 3.39366 21.4359 3.25707 21.3168C3.12048 21.1976 3.03165 21.0331 3.007 20.8535L3 20.7505V3.24854ZM18.754 3.99854H4.5V14.5015H18.754L15.152 9.69954C15.0546 9.56971 15.002 9.41181 15.002 9.24954C15.002 9.08726 15.0546 8.92936 15.152 8.79954L18.754 3.99854Z' fill='white'/> </svg>")
And Rectangle object under "Content_stage_frame", call it "stage1_rectangle" with Fill property:
RGBA(244, 166, 84, 1)
And Image object under "Content_stage_frame", call it "delivery_icon" with Image property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.75 3C4.15326 3 3.58097 3.23705 3.15901 3.65901C2.73705 4.08097 2.5 4.65326 2.5 5.25V17.25C2.50004 17.8104 2.70918 18.3505 3.08648 18.7648C3.46378 19.1791 3.98209 19.4377 4.54 19.49C4.65516 20.1911 5.01541 20.8286 5.55659 21.2889C6.09778 21.7492 6.78478 22.0025 7.49526 22.0037C8.20575 22.0049 8.8936 21.7539 9.43634 21.2954C9.97907 20.8369 10.3415 20.2007 10.459 19.5H12.541C12.658 20.2003 13.0195 20.8363 13.5613 21.2951C14.1031 21.7539 14.79 22.0057 15.5 22.0057C16.21 22.0057 16.8969 21.7539 17.4387 21.2951C17.9805 20.8363 18.342 20.2003 18.459 19.5H20.25C20.5455 19.5 20.8381 19.4418 21.111 19.3287C21.384 19.2157 21.6321 19.0499 21.841 18.841C22.0499 18.6321 22.2157 18.384 22.3287 18.111C22.4418 17.8381 22.5 17.5455 22.5 17.25V11.837C22.4998 11.5039 22.4257 11.175 22.283 10.874L20.584 7.287C20.4017 6.90205 20.1139 6.57675 19.754 6.34892C19.3941 6.12109 18.9769 6.0001 18.551 6H17V5.25C17 4.65326 16.7629 4.08097 16.341 3.65901C15.919 3.23705 15.3467 3 14.75 3H4.75ZM18.33 18C18.0907 17.3259 17.6192 16.759 17 16.401V12.5H21V15.5H19.75C19.5511 15.5 19.3603 15.579 19.2197 15.7197C19.079 15.8603 19 16.0511 19 16.25C19 16.4489 19.079 16.6397 19.2197 16.7803C19.3603 16.921 19.5511 17 19.75 17H21V17.25C21 17.4489 20.921 17.6397 20.7803 17.7803C20.6397 17.921 20.4489 18 20.25 18H18.33ZM15.5 16C14.8794 15.9998 14.274 16.1921 13.7671 16.5502C13.2603 16.9084 12.877 17.4149 12.67 18H10.33C10.1234 17.415 9.74057 16.9084 9.2342 16.55C8.72783 16.1915 8.12282 15.9988 7.50241 15.9984C6.88201 15.9979 6.27672 16.1898 5.76985 16.5475C5.26297 16.9053 4.87943 17.4113 4.672 17.996C4.48759 17.9767 4.31685 17.8898 4.19275 17.752C4.06865 17.6143 3.99998 17.4354 4 17.25V5.25C4 5.05109 4.07902 4.86032 4.21967 4.71967C4.36032 4.57902 4.55109 4.5 4.75 4.5H14.75C14.9489 4.5 15.1397 4.57902 15.2803 4.71967C15.421 4.86032 15.5 5.05109 15.5 5.25V16ZM17 7.5H18.55C18.6922 7.49978 18.8315 7.53999 18.9518 7.61595C19.072 7.69191 19.1681 7.80048 19.229 7.929L20.683 11H17V7.5ZM7.5 20.5C7.10218 20.5 6.72064 20.342 6.43934 20.0607C6.15804 19.7794 6 19.3978 6 19C6 18.6022 6.15804 18.2206 6.43934 17.9393C6.72064 17.658 7.10218 17.5 7.5 17.5C7.89782 17.5 8.27936 17.658 8.56066 17.9393C8.84196 18.2206 9 18.6022 9 19C9 19.3978 8.84196 19.7794 8.56066 20.0607C8.27936 20.342 7.89782 20.5 7.5 20.5ZM17 19C17 19.3978 16.842 19.7794 16.5607 20.0607C16.2794 20.342 15.8978 20.5 15.5 20.5C15.1022 20.5 14.7206 20.342 14.4393 20.0607C14.158 19.7794 14 19.3978 14 19C14 18.6022 14.158 18.2206 14.4393 17.9393C14.7206 17.658 15.1022 17.5 15.5 17.5C15.8978 17.5 16.2794 17.658 16.5607 17.9393C16.842 18.2206 17 18.6022 17 19Z' fill='white'/> </svg>")
And Rectangle object under "Content_stage_frame", call it "stage2_rectangle" with Fill property:
RGBA(217, 217, 217, 1)
And Image object under "Content_stage_frame", call it "delivered_icon" with Image property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M17.75 3C18.612 3 19.4386 3.34241 20.0481 3.9519C20.6576 4.5614 21 5.38805 21 6.25V12.022C20.5325 11.7223 20.0284 11.484 19.5 11.313V8.5H4.5V17.75C4.5 18.716 5.284 19.5 6.25 19.5H11.313C11.486 20.034 11.725 20.537 12.022 21H6.25C5.38805 21 4.5614 20.6576 3.9519 20.0481C3.34241 19.4386 3 18.612 3 17.75V6.25C3 5.38805 3.34241 4.5614 3.9519 3.9519C4.5614 3.34241 5.38805 3 6.25 3H17.75ZM17.75 4.5H6.25C5.78587 4.5 5.34075 4.68437 5.01256 5.01256C4.68437 5.34075 4.5 5.78587 4.5 6.25V7H19.5V6.25C19.5 5.78587 19.3156 5.34075 18.9874 5.01256C18.6592 4.68437 18.2141 4.5 17.75 4.5Z' fill='white'/> <path d='M23 17.5C23 18.9587 22.4205 20.3576 21.3891 21.3891C20.3576 22.4205 18.9587 23 17.5 23C16.0413 23 14.6424 22.4205 13.6109 21.3891C12.5795 20.3576 12 18.9587 12 17.5C12 16.0413 12.5795 14.6424 13.6109 13.6109C14.6424 12.5795 16.0413 12 17.5 12C18.9587 12 20.3576 12.5795 21.3891 13.6109C22.4205 14.6424 23 16.0413 23 17.5ZM20.854 15.146C20.8076 15.0994 20.7524 15.0625 20.6916 15.0373C20.6309 15.0121 20.5658 14.9991 20.5 14.9991C20.4342 14.9991 20.3691 15.0121 20.3084 15.0373C20.2476 15.0625 20.1924 15.0994 20.146 15.146L16.5 18.793L14.854 17.146C14.7601 17.0521 14.6328 16.9994 14.5 16.9994C14.3672 16.9994 14.2399 17.0521 14.146 17.146C14.0521 17.2399 13.9994 17.3672 13.9994 17.5C13.9994 17.6328 14.0521 17.7601 14.146 17.854L16.146 19.854C16.1924 19.9006 16.2476 19.9375 16.3084 19.9627C16.3691 19.9879 16.4342 20.0009 16.5 20.0009C16.5658 20.0009 16.6309 19.9879 16.6916 19.9627C16.7524 19.9375 16.8076 19.9006 16.854 19.854L20.854 15.854C20.9006 15.8076 20.9375 15.7524 20.9627 15.6916C20.9879 15.6309 21.0009 15.5658 21.0009 15.5C21.0009 15.4342 20.9879 15.3691 20.9627 15.3084C20.9375 15.2476 20.9006 15.1924 20.854 15.146Z' fill='white'/> </svg>")
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a master frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_Stage_Box_frame" with these properties:
Step 2 - create a header frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_Header_stage_frame" with these properties:
Add a new Text (T command) object under a "horcont_Header_stage_frame" frame, call it "lbl_title_stage" with these properties:
Add a new Text (T command) object under a "horcont_Header_stage_frame" frame, call it "lbl_date_stage" with these properties:
Step 3 - create a content frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_Content_stage_frame" with these properties:
Import a new SVG file under a "cont_content_report" frame, call it "svg_flag_icon" with this XML code:
<svg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M3 3.24854C3 3.04962 3.07902 2.85886 3.21967 2.7182C3.36032 2.57755 3.55109 2.49854 3.75 2.49854H20.254C20.3933 2.49854 20.5298 2.53732 20.6483 2.61055C20.7668 2.68377 20.8625 2.78855 20.9248 2.91313C20.9871 3.0377 21.0135 3.17717 21.001 3.31589C20.9885 3.45461 20.9376 3.58711 20.854 3.69854L16.69 9.24954L20.854 14.8015C20.9376 14.913 20.9885 15.0455 21.001 15.1842C21.0135 15.3229 20.9871 15.4624 20.9248 15.5869C20.8625 15.7115 20.7668 15.8163 20.6483 15.8895C20.5298 15.9628 20.3933 16.0015 20.254 16.0015H4.5V20.7505C4.49999 20.9318 4.43436 21.1069 4.31523 21.2435C4.19611 21.3801 4.03155 21.4689 3.852 21.4935L3.75 21.5015C3.56876 21.5015 3.39366 21.4359 3.25707 21.3168C3.12048 21.1976 3.03165 21.0331 3.007 20.8535L3 20.7505V3.24854ZM18.754 3.99854H4.5V14.5015H18.754L15.152 9.69954C15.0546 9.56971 15.002 9.41181 15.002 9.24954C15.002 9.08726 15.0546 8.92936 15.152 8.79954L18.754 3.99854Z' fill='white'/> </svg>
Add a new Rectangle (R command) object, call it "rect_stage1_rectangle" with these properties:
Import a new SVG file under a "cont_content_report" frame, call it "svg_delivery_icon" with this XML code:
<svg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.75 3C4.15326 3 3.58097 3.23705 3.15901 3.65901C2.73705 4.08097 2.5 4.65326 2.5 5.25V17.25C2.50004 17.8104 2.70918 18.3505 3.08648 18.7648C3.46378 19.1791 3.98209 19.4377 4.54 19.49C4.65516 20.1911 5.01541 20.8286 5.55659 21.2889C6.09778 21.7492 6.78478 22.0025 7.49526 22.0037C8.20575 22.0049 8.8936 21.7539 9.43634 21.2954C9.97907 20.8369 10.3415 20.2007 10.459 19.5H12.541C12.658 20.2003 13.0195 20.8363 13.5613 21.2951C14.1031 21.7539 14.79 22.0057 15.5 22.0057C16.21 22.0057 16.8969 21.7539 17.4387 21.2951C17.9805 20.8363 18.342 20.2003 18.459 19.5H20.25C20.5455 19.5 20.8381 19.4418 21.111 19.3287C21.384 19.2157 21.6321 19.0499 21.841 18.841C22.0499 18.6321 22.2157 18.384 22.3287 18.111C22.4418 17.8381 22.5 17.5455 22.5 17.25V11.837C22.4998 11.5039 22.4257 11.175 22.283 10.874L20.584 7.287C20.4017 6.90205 20.1139 6.57675 19.754 6.34892C19.3941 6.12109 18.9769 6.0001 18.551 6H17V5.25C17 4.65326 16.7629 4.08097 16.341 3.65901C15.919 3.23705 15.3467 3 14.75 3H4.75ZM18.33 18C18.0907 17.3259 17.6192 16.759 17 16.401V12.5H21V15.5H19.75C19.5511 15.5 19.3603 15.579 19.2197 15.7197C19.079 15.8603 19 16.0511 19 16.25C19 16.4489 19.079 16.6397 19.2197 16.7803C19.3603 16.921 19.5511 17 19.75 17H21V17.25C21 17.4489 20.921 17.6397 20.7803 17.7803C20.6397 17.921 20.4489 18 20.25 18H18.33ZM15.5 16C14.8794 15.9998 14.274 16.1921 13.7671 16.5502C13.2603 16.9084 12.877 17.4149 12.67 18H10.33C10.1234 17.415 9.74057 16.9084 9.2342 16.55C8.72783 16.1915 8.12282 15.9988 7.50241 15.9984C6.88201 15.9979 6.27672 16.1898 5.76985 16.5475C5.26297 16.9053 4.87943 17.4113 4.672 17.996C4.48759 17.9767 4.31685 17.8898 4.19275 17.752C4.06865 17.6143 3.99998 17.4354 4 17.25V5.25C4 5.05109 4.07902 4.86032 4.21967 4.71967C4.36032 4.57902 4.55109 4.5 4.75 4.5H14.75C14.9489 4.5 15.1397 4.57902 15.2803 4.71967C15.421 4.86032 15.5 5.05109 15.5 5.25V16ZM17 7.5H18.55C18.6922 7.49978 18.8315 7.53999 18.9518 7.61595C19.072 7.69191 19.1681 7.80048 19.229 7.929L20.683 11H17V7.5ZM7.5 20.5C7.10218 20.5 6.72064 20.342 6.43934 20.0607C6.15804 19.7794 6 19.3978 6 19C6 18.6022 6.15804 18.2206 6.43934 17.9393C6.72064 17.658 7.10218 17.5 7.5 17.5C7.89782 17.5 8.27936 17.658 8.56066 17.9393C8.84196 18.2206 9 18.6022 9 19C9 19.3978 8.84196 19.7794 8.56066 20.0607C8.27936 20.342 7.89782 20.5 7.5 20.5ZM17 19C17 19.3978 16.842 19.7794 16.5607 20.0607C16.2794 20.342 15.8978 20.5 15.5 20.5C15.1022 20.5 14.7206 20.342 14.4393 20.0607C14.158 19.7794 14 19.3978 14 19C14 18.6022 14.158 18.2206 14.4393 17.9393C14.7206 17.658 15.1022 17.5 15.5 17.5C15.8978 17.5 16.2794 17.658 16.5607 17.9393C16.842 18.2206 17 18.6022 17 19Z' fill='white'/> </svg>
Add a new Rectangle (R command) object, call it "rect_stage2_rectangle" with these properties:
Import a new SVG file under a "cont_content_report" frame, call it "svg_delivered_icon" with this XML code:
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M17.75 3C18.612 3 19.4386 3.34241 20.0481 3.9519C20.6576 4.5614 21 5.38805 21 6.25V12.022C20.5325 11.7223 20.0284 11.484 19.5 11.313V8.5H4.5V17.75C4.5 18.716 5.284 19.5 6.25 19.5H11.313C11.486 20.034 11.725 20.537 12.022 21H6.25C5.38805 21 4.5614 20.6576 3.9519 20.0481C3.34241 19.4386 3 18.612 3 17.75V6.25C3 5.38805 3.34241 4.5614 3.9519 3.9519C4.5614 3.34241 5.38805 3 6.25 3H17.75ZM17.75 4.5H6.25C5.78587 4.5 5.34075 4.68437 5.01256 5.01256C4.68437 5.34075 4.5 5.78587 4.5 6.25V7H19.5V6.25C19.5 5.78587 19.3156 5.34075 18.9874 5.01256C18.6592 4.68437 18.2141 4.5 17.75 4.5Z' fill='white'/> <path d='M23 17.5C23 18.9587 22.4205 20.3576 21.3891 21.3891C20.3576 22.4205 18.9587 23 17.5 23C16.0413 23 14.6424 22.4205 13.6109 21.3891C12.5795 20.3576 12 18.9587 12 17.5C12 16.0413 12.5795 14.6424 13.6109 13.6109C14.6424 12.5795 16.0413 12 17.5 12C18.9587 12 20.3576 12.5795 21.3891 13.6109C22.4205 14.6424 23 16.0413 23 17.5ZM20.854 15.146C20.8076 15.0994 20.7524 15.0625 20.6916 15.0373C20.6309 15.0121 20.5658 14.9991 20.5 14.9991C20.4342 14.9991 20.3691 15.0121 20.3084 15.0373C20.2476 15.0625 20.1924 15.0994 20.146 15.146L16.5 18.793L14.854 17.146C14.7601 17.0521 14.6328 16.9994 14.5 16.9994C14.3672 16.9994 14.2399 17.0521 14.146 17.146C14.0521 17.2399 13.9994 17.3672 13.9994 17.5C13.9994 17.6328 14.0521 17.7601 14.146 17.854L16.146 19.854C16.1924 19.9006 16.2476 19.9375 16.3084 19.9627C16.3691 19.9879 16.4342 20.0009 16.5 20.0009C16.5658 20.0009 16.6309 19.9879 16.6916 19.9627C16.7524 19.9375 16.8076 19.9006 16.854 19.854L20.854 15.854C20.9006 15.8076 20.9375 15.7524 20.9627 15.6916C20.9879 15.6309 21.0009 15.5658 21.0009 15.5C21.0009 15.4342 20.9879 15.3691 20.9627 15.3084C20.9375 15.2476 20.9006 15.1924 20.854 15.146Z' fill='white'/> </svg>
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.