Skip to content
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create parent container
Add a new Manual Container PCF object, call it "einsenhower_matrix" with this "DropShadow" property:
DropShadow.Semibold
Step 2 - create 4 definition containers
Add a new Manual Container PCF object, call it "urgent" with this "Color" property:
RGBA(221, 102, 108, 1)
Add a new Manual Container PCF object, call it "important" with this "Color" property:
RGBA(241, 209, 126, 1)
Add a new Manual Container PCF object, call it "not_urgent" with this "Color" property:
RGBA(148, 132, 117, 1)
Add a new Manual Container PCF object, call it "not_important" with this "Color" property:
RGBA(118, 191, 152, 1)
Step 3 - create 4 galleries under containers
Add a new Horizontal Gallery object under "urgent", call it "urgent_gallery" with this "Items" property:
First(CustomGallerySample)
Add a new Horizontal Gallery object under "urgent", call it "not_urgent_gallery" with this "Items" property:
First(CustomGallerySample)
Add a new Horizontal Gallery object under "urgent", call it "important_gallery" with this "Items" property:
First(CustomGallerySample)
Add a new Horizontal Gallery object under "urgent", call it "not_important_gallery" with this "Items" property:
First(CustomGallerySample)
You can replace sample gallery by your real data from SharePoint or Dataverse. Under every gallery I used only label control to visualise name of your task.
Step 4 - create titles
Add a new Label object, call it "urgent_title" with Text property:
"URGENT"
Add a new Label object, call it "not_urgent_title" with Text property:
"NOT URGENT"
Step 5 - create arrow
Add a new Image object, call it "arrow_important" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='33' height='368' viewBox='0 0 33 368' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M16 0.478271L0.269531 11.8391H6.38692L5.51301 357.035H0.269531L16 367.522L31.7304 357.035H24.7391V11.8391H32.6043L16 0.478271Z' fill='white'/> <path d='M21.2434 132.023H10.3265V130.544H21.2434V132.023Z' fill='black'/> <path d='M21.2434 127.968H10.3265V126.929L17.9243 122.305V123.013L10.3265 118.388V117.35H21.2434V118.828H12.922L13.0164 118.482L19.0097 122.132V123.17L13.0164 126.819L12.922 126.489H21.2434V127.968Z' fill='black'/> <path d='M16.9962 113.781H15.7063V110.808C15.7063 110.399 15.6224 110.037 15.4546 109.722C15.2869 109.397 15.0509 109.146 14.7468 108.967C14.4427 108.779 14.0809 108.684 13.6614 108.684C13.2419 108.684 12.8801 108.779 12.576 108.967C12.2719 109.146 12.0359 109.397 11.8681 109.722C11.7003 110.037 11.6164 110.399 11.6164 110.808V113.781H10.3265V110.713C10.3265 110.042 10.4629 109.445 10.7355 108.92C11.0082 108.385 11.3962 107.966 11.8996 107.662C12.3925 107.347 12.9797 107.19 13.6614 107.19C14.3325 107.19 14.9198 107.347 15.4232 107.662C15.9161 107.966 16.3041 108.385 16.5872 108.92C16.8599 109.445 16.9962 110.042 16.9962 110.713V113.781ZM21.2434 114.772H10.3265V113.293H21.2434V114.772Z' fill='black'/> <path d='M21.4008 100.261C21.4008 101.037 21.2592 101.761 20.976 102.432C20.6824 103.103 20.2786 103.691 19.7648 104.194C19.2404 104.697 18.6374 105.091 17.9558 105.374C17.2741 105.646 16.5453 105.783 15.7693 105.783C14.9827 105.783 14.2539 105.646 13.5827 105.374C12.9011 105.091 12.3033 104.703 11.7895 104.21C11.2756 103.706 10.8771 103.124 10.5939 102.464C10.3108 101.793 10.1692 101.069 10.1692 100.293C10.1692 99.5169 10.3108 98.7985 10.5939 98.1378C10.8771 97.4667 11.2756 96.8794 11.7895 96.376C12.3033 95.8726 12.9011 95.4794 13.5827 95.1962C14.2644 94.9131 14.9985 94.7715 15.785 94.7715C16.561 94.7715 17.2899 94.9131 17.9715 95.1962C18.6532 95.4794 19.2509 95.8726 19.7648 96.376C20.2786 96.8689 20.6824 97.4509 20.976 98.1221C21.2592 98.7828 21.4008 99.4959 21.4008 100.261ZM19.985 100.293C19.985 99.5064 19.8067 98.8195 19.4502 98.2322C19.0831 97.6345 18.585 97.1625 17.9558 96.8165C17.3161 96.4704 16.5872 96.2974 15.7693 96.2974C15.161 96.2974 14.6052 96.397 14.1018 96.5962C13.588 96.7955 13.1423 97.0734 12.7647 97.43C12.3872 97.7865 12.0988 98.206 11.8996 98.6884C11.6898 99.1708 11.585 99.7056 11.585 100.293C11.585 101.069 11.7632 101.756 12.1198 102.354C12.4763 102.941 12.9692 103.408 13.5985 103.754C14.2277 104.089 14.9513 104.257 15.7693 104.257C16.3775 104.257 16.9438 104.163 17.4681 103.974C17.982 103.775 18.4277 103.502 18.8052 103.156C19.1723 102.799 19.4607 102.38 19.6704 101.897C19.8801 101.405 19.985 100.87 19.985 100.293Z' fill='black'/> <path d='M16.4929 91.7521H15.2501V88.7948C15.2501 88.1551 15.0876 87.6622 14.7625 87.3162C14.4374 86.9701 13.997 86.797 13.4411 86.797C12.9168 86.797 12.4816 86.9701 12.1355 87.3162C11.7895 87.6517 11.6164 88.1394 11.6164 88.7791V91.7521H10.3265V88.7319C10.3265 88.0397 10.4629 87.4367 10.7355 86.9229C10.9977 86.409 11.3595 86.0158 11.8209 85.7431C12.2823 85.46 12.8119 85.3184 13.4097 85.3184C14.0284 85.3184 14.5685 85.46 15.0299 85.7431C15.4913 86.0158 15.8531 86.409 16.1153 86.9229C16.367 87.4367 16.4929 88.0397 16.4929 88.7319V91.7521ZM21.2434 92.7432H10.3265V91.2645H21.2434V92.7432ZM21.2434 86.451L16.3513 90.415L15.8636 89.015L21.2434 84.5791V86.451Z' fill='black'/> <path d='M21.2434 80.7392H10.6411V79.2606H21.2434V80.7392ZM11.6793 84.4516H10.3265V75.5639H11.6793V84.4516Z' fill='black'/> <path d='M21.2434 76.202L10.3265 71.7345V70.6649L21.2434 66.2132V67.8177L12.0097 71.4829V70.9323L21.2434 74.6289V76.202ZM18.7738 74.0784H17.4839V68.3368H18.7738V74.0784Z' fill='black'/> <path d='M21.2434 64.5697H10.3265V63.5315L12.0411 63.091H21.2434V64.5697ZM21.2434 57.0191L12.2928 63.7203L10.3265 63.5315L19.2614 56.8146L21.2434 57.0191ZM21.2434 57.0191L19.6232 57.4595H10.3265V55.9809H21.2434V57.0191Z' fill='black'/> <path d='M21.2434 50.5073H10.6411V49.0286H21.2434V50.5073ZM11.6793 54.2197H10.3265V45.332H11.6793V54.2197Z' fill='black'/> <path d='M21.2434 341.762H10.3265V340.724L12.0411 340.284H21.2434V341.762ZM21.2434 334.212L12.2928 340.913L10.3265 340.724L19.2614 334.007L21.2434 334.212ZM21.2434 334.212L19.6232 334.652H10.3265V333.173H21.2434V334.212Z' fill='black'/> <path d='M21.4008 325.623C21.4008 326.399 21.2592 327.123 20.976 327.794C20.6824 328.465 20.2786 329.053 19.7648 329.556C19.2404 330.059 18.6374 330.453 17.9558 330.736C17.2741 331.009 16.5453 331.145 15.7693 331.145C14.9827 331.145 14.2539 331.009 13.5827 330.736C12.9011 330.453 12.3033 330.065 11.7895 329.572C11.2756 329.068 10.8771 328.486 10.5939 327.826C10.3108 327.155 10.1692 326.431 10.1692 325.655C10.1692 324.879 10.3108 324.161 10.5939 323.5C10.8771 322.829 11.2756 322.241 11.7895 321.738C12.3033 321.235 12.9011 320.841 13.5827 320.558C14.2644 320.275 14.9985 320.134 15.785 320.134C16.561 320.134 17.2899 320.275 17.9715 320.558C18.6532 320.841 19.2509 321.235 19.7648 321.738C20.2786 322.231 20.6824 322.813 20.976 323.484C21.2592 324.145 21.4008 324.858 21.4008 325.623ZM19.985 325.655C19.985 324.868 19.8067 324.182 19.4502 323.594C19.0831 322.996 18.585 322.525 17.9558 322.179C17.3161 321.832 16.5872 321.659 15.7693 321.659C15.161 321.659 14.6052 321.759 14.1018 321.958C13.588 322.158 13.1423 322.435 12.7647 322.792C12.3872 323.149 12.0988 323.568 11.8996 324.05C11.6898 324.533 11.585 325.068 11.585 325.655C11.585 326.431 11.7632 327.118 12.1198 327.716C12.4763 328.303 12.9692 328.77 13.5985 329.116C14.2277 329.451 14.9513 329.619 15.7693 329.619C16.3775 329.619 16.9438 329.525 17.4681 329.336C17.982 329.137 18.4277 328.864 18.8052 328.518C19.1723 328.161 19.4607 327.742 19.6704 327.259C19.8801 326.767 19.985 326.232 19.985 325.655Z' fill='black'/> <path d='M21.2434 316.01H10.6411V314.531H21.2434V316.01ZM11.6793 319.722H10.3265V310.834H11.6793V319.722Z' fill='black'/> <path d='M21.2434 306.046H10.3265V304.568H21.2434V306.046Z' fill='black'/> <path d='M21.2434 301.991H10.3265V300.952L17.9243 296.328V297.036L10.3265 292.411V291.373H21.2434V292.851H12.922L13.0164 292.505L19.0097 296.155V297.193L13.0164 300.842L12.922 300.512H21.2434V301.991Z' fill='black'/> <path d='M16.9962 287.804H15.7063V284.831C15.7063 284.422 15.6224 284.06 15.4546 283.745C15.2869 283.42 15.0509 283.169 14.7468 282.99C14.4427 282.802 14.0809 282.707 13.6614 282.707C13.2419 282.707 12.8801 282.802 12.576 282.99C12.2719 283.169 12.0359 283.42 11.8681 283.745C11.7003 284.06 11.6164 284.422 11.6164 284.831V287.804H10.3265V284.737C10.3265 284.065 10.4629 283.468 10.7355 282.943C11.0082 282.408 11.3962 281.989 11.8996 281.685C12.3925 281.37 12.9797 281.213 13.6614 281.213C14.3325 281.213 14.9198 281.37 15.4232 281.685C15.9161 281.989 16.3041 282.408 16.5872 282.943C16.8599 283.468 16.9962 284.065 16.9962 284.737V287.804ZM21.2434 288.795H10.3265V287.316H21.2434V288.795Z' fill='black'/> <path d='M21.4008 274.284C21.4008 275.061 21.2592 275.784 20.976 276.455C20.6824 277.126 20.2786 277.714 19.7648 278.217C19.2404 278.72 18.6374 279.114 17.9558 279.397C17.2741 279.67 16.5453 279.806 15.7693 279.806C14.9827 279.806 14.2539 279.67 13.5827 279.397C12.9011 279.114 12.3033 278.726 11.7895 278.233C11.2756 277.729 10.8771 277.147 10.5939 276.487C10.3108 275.816 10.1692 275.092 10.1692 274.316C10.1692 273.54 10.3108 272.822 10.5939 272.161C10.8771 271.49 11.2756 270.902 11.7895 270.399C12.3033 269.896 12.9011 269.502 13.5827 269.219C14.2644 268.936 14.9985 268.795 15.785 268.795C16.561 268.795 17.2899 268.936 17.9715 269.219C18.6532 269.502 19.2509 269.896 19.7648 270.399C20.2786 270.892 20.6824 271.474 20.976 272.145C21.2592 272.806 21.4008 273.519 21.4008 274.284ZM19.985 274.316C19.985 273.529 19.8067 272.843 19.4502 272.255C19.0831 271.658 18.585 271.186 17.9558 270.84C17.3161 270.493 16.5872 270.32 15.7693 270.32C15.161 270.32 14.6052 270.42 14.1018 270.619C13.588 270.819 13.1423 271.096 12.7647 271.453C12.3872 271.81 12.0988 272.229 11.8996 272.711C11.6898 273.194 11.585 273.729 11.585 274.316C11.585 275.092 11.7632 275.779 12.1198 276.377C12.4763 276.964 12.9692 277.431 13.5985 277.777C14.2277 278.112 14.9513 278.28 15.7693 278.28C16.3775 278.28 16.9438 278.186 17.4681 277.997C17.982 277.798 18.4277 277.525 18.8052 277.179C19.1723 276.822 19.4607 276.403 19.6704 275.92C19.8801 275.428 19.985 274.893 19.985 274.316Z' fill='black'/> <path d='M16.4929 265.775H15.2501V262.818C15.2501 262.178 15.0876 261.685 14.7625 261.339C14.4374 260.993 13.997 260.82 13.4411 260.82C12.9168 260.82 12.4816 260.993 12.1355 261.339C11.7895 261.675 11.6164 262.162 11.6164 262.802V265.775H10.3265V262.755C10.3265 262.063 10.4629 261.46 10.7355 260.946C10.9977 260.432 11.3595 260.039 11.8209 259.766C12.2823 259.483 12.8119 259.341 13.4097 259.341C14.0284 259.341 14.5685 259.483 15.0299 259.766C15.4913 260.039 15.8531 260.432 16.1153 260.946C16.367 261.46 16.4929 262.063 16.4929 262.755V265.775ZM21.2434 266.766H10.3265V265.288H21.2434V266.766ZM21.2434 260.474L16.3513 264.438L15.8636 263.038L21.2434 258.602V260.474Z' fill='black'/> <path d='M21.2434 254.762H10.6411V253.284H21.2434V254.762ZM11.6793 258.475H10.3265V249.587H11.6793V258.475Z' fill='black'/> <path d='M21.2434 250.225L10.3265 245.758V244.688L21.2434 240.236V241.841L12.0097 245.506V244.955L21.2434 248.652V250.225ZM18.7738 248.101H17.4839V242.36H18.7738V248.101Z' fill='black'/> <path d='M21.2434 238.593H10.3265V237.555L12.0411 237.114H21.2434V238.593ZM21.2434 231.042L12.2928 237.743L10.3265 237.555L19.2614 230.838L21.2434 231.042ZM21.2434 231.042L19.6232 231.483H10.3265V230.004H21.2434V231.042Z' fill='black'/> <path d='M21.2434 224.53H10.6411V223.052H21.2434V224.53ZM11.6793 228.243H10.3265V219.355H11.6793V228.243Z' fill='black'/> </svg>")
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a main frame
Add a new Frame (F command) object, call it "cont_einsenhower_matrix" with these properties:
Step 2 - create 4 definition frames
Add a new Frame (F command) object, call it "cont_urgent" with these properties:
Add a new Frame (F command) object, call it "cont_not_urgent" with these properties:
Add a new Frame (F command) object, call it "cont_important" with these properties:
Add a new Frame (F command) object, call it "cont_not_important" with these properties:
Step 3 - create 4 inner frames under definition frames
Add a new Frame (F command) object, call it "gall_urgent_gallery".
Add a new Frame (F command) object, call it "gall_not_urgent_gallery".
Add a new Frame (F command) object, call it "gall_important_gallery".
Add a new Frame (F command) object, call it "gall_not_important_gallery".
Under every gallery frame insert a new Frame (F command) object, call them "cont_urgent/not_urgent/important/not_important_item". Finally, under every item frame add a Text object (T command) with these properties:
Step 4 - create titles
Add a new Text (T command) object, call it "lbl_urgent_title" with these properties:
Add a new Text (T command) object, call it "lbl_not_urgent_title" with these properties:
Step 5 - create arrow with texts as vector
Import a new SVG file, call it "svg_arrow_important" with this XML code:
<svg width='33' height='368' viewBox='0 0 33 368' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M16 0.478271L0.269531 11.8391H6.38692L5.51301 357.035H0.269531L16 367.522L31.7304 357.035H24.7391V11.8391H32.6043L16 0.478271Z' fill='white'/> <path d='M21.2434 132.023H10.3265V130.544H21.2434V132.023Z' fill='black'/> <path d='M21.2434 127.968H10.3265V126.929L17.9243 122.305V123.013L10.3265 118.388V117.35H21.2434V118.828H12.922L13.0164 118.482L19.0097 122.132V123.17L13.0164 126.819L12.922 126.489H21.2434V127.968Z' fill='black'/> <path d='M16.9962 113.781H15.7063V110.808C15.7063 110.399 15.6224 110.037 15.4546 109.722C15.2869 109.397 15.0509 109.146 14.7468 108.967C14.4427 108.779 14.0809 108.684 13.6614 108.684C13.2419 108.684 12.8801 108.779 12.576 108.967C12.2719 109.146 12.0359 109.397 11.8681 109.722C11.7003 110.037 11.6164 110.399 11.6164 110.808V113.781H10.3265V110.713C10.3265 110.042 10.4629 109.445 10.7355 108.92C11.0082 108.385 11.3962 107.966 11.8996 107.662C12.3925 107.347 12.9797 107.19 13.6614 107.19C14.3325 107.19 14.9198 107.347 15.4232 107.662C15.9161 107.966 16.3041 108.385 16.5872 108.92C16.8599 109.445 16.9962 110.042 16.9962 110.713V113.781ZM21.2434 114.772H10.3265V113.293H21.2434V114.772Z' fill='black'/> <path d='M21.4008 100.261C21.4008 101.037 21.2592 101.761 20.976 102.432C20.6824 103.103 20.2786 103.691 19.7648 104.194C19.2404 104.697 18.6374 105.091 17.9558 105.374C17.2741 105.646 16.5453 105.783 15.7693 105.783C14.9827 105.783 14.2539 105.646 13.5827 105.374C12.9011 105.091 12.3033 104.703 11.7895 104.21C11.2756 103.706 10.8771 103.124 10.5939 102.464C10.3108 101.793 10.1692 101.069 10.1692 100.293C10.1692 99.5169 10.3108 98.7985 10.5939 98.1378C10.8771 97.4667 11.2756 96.8794 11.7895 96.376C12.3033 95.8726 12.9011 95.4794 13.5827 95.1962C14.2644 94.9131 14.9985 94.7715 15.785 94.7715C16.561 94.7715 17.2899 94.9131 17.9715 95.1962C18.6532 95.4794 19.2509 95.8726 19.7648 96.376C20.2786 96.8689 20.6824 97.4509 20.976 98.1221C21.2592 98.7828 21.4008 99.4959 21.4008 100.261ZM19.985 100.293C19.985 99.5064 19.8067 98.8195 19.4502 98.2322C19.0831 97.6345 18.585 97.1625 17.9558 96.8165C17.3161 96.4704 16.5872 96.2974 15.7693 96.2974C15.161 96.2974 14.6052 96.397 14.1018 96.5962C13.588 96.7955 13.1423 97.0734 12.7647 97.43C12.3872 97.7865 12.0988 98.206 11.8996 98.6884C11.6898 99.1708 11.585 99.7056 11.585 100.293C11.585 101.069 11.7632 101.756 12.1198 102.354C12.4763 102.941 12.9692 103.408 13.5985 103.754C14.2277 104.089 14.9513 104.257 15.7693 104.257C16.3775 104.257 16.9438 104.163 17.4681 103.974C17.982 103.775 18.4277 103.502 18.8052 103.156C19.1723 102.799 19.4607 102.38 19.6704 101.897C19.8801 101.405 19.985 100.87 19.985 100.293Z' fill='black'/> <path d='M16.4929 91.7521H15.2501V88.7948C15.2501 88.1551 15.0876 87.6622 14.7625 87.3162C14.4374 86.9701 13.997 86.797 13.4411 86.797C12.9168 86.797 12.4816 86.9701 12.1355 87.3162C11.7895 87.6517 11.6164 88.1394 11.6164 88.7791V91.7521H10.3265V88.7319C10.3265 88.0397 10.4629 87.4367 10.7355 86.9229C10.9977 86.409 11.3595 86.0158 11.8209 85.7431C12.2823 85.46 12.8119 85.3184 13.4097 85.3184C14.0284 85.3184 14.5685 85.46 15.0299 85.7431C15.4913 86.0158 15.8531 86.409 16.1153 86.9229C16.367 87.4367 16.4929 88.0397 16.4929 88.7319V91.7521ZM21.2434 92.7432H10.3265V91.2645H21.2434V92.7432ZM21.2434 86.451L16.3513 90.415L15.8636 89.015L21.2434 84.5791V86.451Z' fill='black'/> <path d='M21.2434 80.7392H10.6411V79.2606H21.2434V80.7392ZM11.6793 84.4516H10.3265V75.5639H11.6793V84.4516Z' fill='black'/> <path d='M21.2434 76.202L10.3265 71.7345V70.6649L21.2434 66.2132V67.8177L12.0097 71.4829V70.9323L21.2434 74.6289V76.202ZM18.7738 74.0784H17.4839V68.3368H18.7738V74.0784Z' fill='black'/> <path d='M21.2434 64.5697H10.3265V63.5315L12.0411 63.091H21.2434V64.5697ZM21.2434 57.0191L12.2928 63.7203L10.3265 63.5315L19.2614 56.8146L21.2434 57.0191ZM21.2434 57.0191L19.6232 57.4595H10.3265V55.9809H21.2434V57.0191Z' fill='black'/> <path d='M21.2434 50.5073H10.6411V49.0286H21.2434V50.5073ZM11.6793 54.2197H10.3265V45.332H11.6793V54.2197Z' fill='black'/> <path d='M21.2434 341.762H10.3265V340.724L12.0411 340.284H21.2434V341.762ZM21.2434 334.212L12.2928 340.913L10.3265 340.724L19.2614 334.007L21.2434 334.212ZM21.2434 334.212L19.6232 334.652H10.3265V333.173H21.2434V334.212Z' fill='black'/> <path d='M21.4008 325.623C21.4008 326.399 21.2592 327.123 20.976 327.794C20.6824 328.465 20.2786 329.053 19.7648 329.556C19.2404 330.059 18.6374 330.453 17.9558 330.736C17.2741 331.009 16.5453 331.145 15.7693 331.145C14.9827 331.145 14.2539 331.009 13.5827 330.736C12.9011 330.453 12.3033 330.065 11.7895 329.572C11.2756 329.068 10.8771 328.486 10.5939 327.826C10.3108 327.155 10.1692 326.431 10.1692 325.655C10.1692 324.879 10.3108 324.161 10.5939 323.5C10.8771 322.829 11.2756 322.241 11.7895 321.738C12.3033 321.235 12.9011 320.841 13.5827 320.558C14.2644 320.275 14.9985 320.134 15.785 320.134C16.561 320.134 17.2899 320.275 17.9715 320.558C18.6532 320.841 19.2509 321.235 19.7648 321.738C20.2786 322.231 20.6824 322.813 20.976 323.484C21.2592 324.145 21.4008 324.858 21.4008 325.623ZM19.985 325.655C19.985 324.868 19.8067 324.182 19.4502 323.594C19.0831 322.996 18.585 322.525 17.9558 322.179C17.3161 321.832 16.5872 321.659 15.7693 321.659C15.161 321.659 14.6052 321.759 14.1018 321.958C13.588 322.158 13.1423 322.435 12.7647 322.792C12.3872 323.149 12.0988 323.568 11.8996 324.05C11.6898 324.533 11.585 325.068 11.585 325.655C11.585 326.431 11.7632 327.118 12.1198 327.716C12.4763 328.303 12.9692 328.77 13.5985 329.116C14.2277 329.451 14.9513 329.619 15.7693 329.619C16.3775 329.619 16.9438 329.525 17.4681 329.336C17.982 329.137 18.4277 328.864 18.8052 328.518C19.1723 328.161 19.4607 327.742 19.6704 327.259C19.8801 326.767 19.985 326.232 19.985 325.655Z' fill='black'/> <path d='M21.2434 316.01H10.6411V314.531H21.2434V316.01ZM11.6793 319.722H10.3265V310.834H11.6793V319.722Z' fill='black'/> <path d='M21.2434 306.046H10.3265V304.568H21.2434V306.046Z' fill='black'/> <path d='M21.2434 301.991H10.3265V300.952L17.9243 296.328V297.036L10.3265 292.411V291.373H21.2434V292.851H12.922L13.0164 292.505L19.0097 296.155V297.193L13.0164 300.842L12.922 300.512H21.2434V301.991Z' fill='black'/> <path d='M16.9962 287.804H15.7063V284.831C15.7063 284.422 15.6224 284.06 15.4546 283.745C15.2869 283.42 15.0509 283.169 14.7468 282.99C14.4427 282.802 14.0809 282.707 13.6614 282.707C13.2419 282.707 12.8801 282.802 12.576 282.99C12.2719 283.169 12.0359 283.42 11.8681 283.745C11.7003 284.06 11.6164 284.422 11.6164 284.831V287.804H10.3265V284.737C10.3265 284.065 10.4629 283.468 10.7355 282.943C11.0082 282.408 11.3962 281.989 11.8996 281.685C12.3925 281.37 12.9797 281.213 13.6614 281.213C14.3325 281.213 14.9198 281.37 15.4232 281.685C15.9161 281.989 16.3041 282.408 16.5872 282.943C16.8599 283.468 16.9962 284.065 16.9962 284.737V287.804ZM21.2434 288.795H10.3265V287.316H21.2434V288.795Z' fill='black'/> <path d='M21.4008 274.284C21.4008 275.061 21.2592 275.784 20.976 276.455C20.6824 277.126 20.2786 277.714 19.7648 278.217C19.2404 278.72 18.6374 279.114 17.9558 279.397C17.2741 279.67 16.5453 279.806 15.7693 279.806C14.9827 279.806 14.2539 279.67 13.5827 279.397C12.9011 279.114 12.3033 278.726 11.7895 278.233C11.2756 277.729 10.8771 277.147 10.5939 276.487C10.3108 275.816 10.1692 275.092 10.1692 274.316C10.1692 273.54 10.3108 272.822 10.5939 272.161C10.8771 271.49 11.2756 270.902 11.7895 270.399C12.3033 269.896 12.9011 269.502 13.5827 269.219C14.2644 268.936 14.9985 268.795 15.785 268.795C16.561 268.795 17.2899 268.936 17.9715 269.219C18.6532 269.502 19.2509 269.896 19.7648 270.399C20.2786 270.892 20.6824 271.474 20.976 272.145C21.2592 272.806 21.4008 273.519 21.4008 274.284ZM19.985 274.316C19.985 273.529 19.8067 272.843 19.4502 272.255C19.0831 271.658 18.585 271.186 17.9558 270.84C17.3161 270.493 16.5872 270.32 15.7693 270.32C15.161 270.32 14.6052 270.42 14.1018 270.619C13.588 270.819 13.1423 271.096 12.7647 271.453C12.3872 271.81 12.0988 272.229 11.8996 272.711C11.6898 273.194 11.585 273.729 11.585 274.316C11.585 275.092 11.7632 275.779 12.1198 276.377C12.4763 276.964 12.9692 277.431 13.5985 277.777C14.2277 278.112 14.9513 278.28 15.7693 278.28C16.3775 278.28 16.9438 278.186 17.4681 277.997C17.982 277.798 18.4277 277.525 18.8052 277.179C19.1723 276.822 19.4607 276.403 19.6704 275.92C19.8801 275.428 19.985 274.893 19.985 274.316Z' fill='black'/> <path d='M16.4929 265.775H15.2501V262.818C15.2501 262.178 15.0876 261.685 14.7625 261.339C14.4374 260.993 13.997 260.82 13.4411 260.82C12.9168 260.82 12.4816 260.993 12.1355 261.339C11.7895 261.675 11.6164 262.162 11.6164 262.802V265.775H10.3265V262.755C10.3265 262.063 10.4629 261.46 10.7355 260.946C10.9977 260.432 11.3595 260.039 11.8209 259.766C12.2823 259.483 12.8119 259.341 13.4097 259.341C14.0284 259.341 14.5685 259.483 15.0299 259.766C15.4913 260.039 15.8531 260.432 16.1153 260.946C16.367 261.46 16.4929 262.063 16.4929 262.755V265.775ZM21.2434 266.766H10.3265V265.288H21.2434V266.766ZM21.2434 260.474L16.3513 264.438L15.8636 263.038L21.2434 258.602V260.474Z' fill='black'/> <path d='M21.2434 254.762H10.6411V253.284H21.2434V254.762ZM11.6793 258.475H10.3265V249.587H11.6793V258.475Z' fill='black'/> <path d='M21.2434 250.225L10.3265 245.758V244.688L21.2434 240.236V241.841L12.0097 245.506V244.955L21.2434 248.652V250.225ZM18.7738 248.101H17.4839V242.36H18.7738V248.101Z' fill='black'/> <path d='M21.2434 238.593H10.3265V237.555L12.0411 237.114H21.2434V238.593ZM21.2434 231.042L12.2928 237.743L10.3265 237.555L19.2614 230.838L21.2434 231.042ZM21.2434 231.042L19.6232 231.483H10.3265V230.004H21.2434V231.042Z' fill='black'/> <path d='M21.2434 224.53H10.6411V223.052H21.2434V224.53ZM11.6793 228.243H10.3265V219.355H11.6793V228.243Z' fill='black'/> </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.