Setcard
Category: Features
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div style="display: block; position: relative; width: 1040px; height: 356px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Desktop/1" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 236, 230); width: 1040px; opacity: 1; border-radius: 24px; cursor: crosshair; display: flex; position: relative; height: 356px; padding: 8px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 8px; overflow: visible;"><div data-framer-name="1+2" style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: grid; position: relative; width: 768px; height: 340px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; gap: 8px; grid-template-columns: 250.663px 250.663px 250.675px; grid-template-rows: 340px; overflow: visible; cursor: crosshair;"><div style="transform: none; transform-origin: 50% 50% 0px; cursor: crosshair; display: block; position: relative; width: 509.325px; height: 340px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible;"><div data-border="true" data-framer-name="Default/Open" data-highlight="true" style="--border-bottom-width: 2px; --border-color: var(--token-3231f815-59bd-4709-9984-27f462c2029e, rgb(255, 255, 255)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(255, 255, 255, 0.9); height: 340px; width: 509.325px; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 20px 0px; transform: none; transform-origin: 50% 50% 0px; will-change: auto; cursor: crosshair; display: flex; position: relative; padding: 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 16px; opacity: 1; overflow: hidden;"><div data-framer-name="Content" style="transform: none; transform-origin: 50% 50% 0px; cursor: crosshair; display: flex; position: relative; width: 222.663px; height: 292px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: space-between; align-items: flex-start; opacity: 1; overflow: visible;"><div data-framer-name="01" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-4f95a47b-73b4-4844-84d0-91caa1d28764, rgb(174, 174, 174)); --framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 17.775px; height: 25.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: crosshair;"><p data-styles-preset="J69hQ97OU" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-4f95a47b-73b4-4844-84d0-91caa1d28764, rgb(174, 174, 174))); cursor: crosshair; display: block; position: static; width: 17.775px; height: 25.2px; border: 0px none rgb(174, 174, 174); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(174, 174, 174); font-family: Geist, "Geist Placeholder", sans-serif; font-size: 18px; font-weight: 400; line-height: 25.2px; text-align: start; letter-spacing: -0.54px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">01</p></div><div data-framer-name="Wrap" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 222.663px; height: 117px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-end; align-items: flex-start; gap: 16px; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Heading" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 222.663px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 8px; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Set Up" data-framer-component-type="RichTextContainer" style="--framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 222.663px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: crosshair;"><h5 data-styles-preset="Do7wzBd6Z" style="display: block; position: static; width: 222.663px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: "Albert Sans", "Albert Sans Placeholder", sans-serif; font-size: 26px; font-weight: 400; line-height: 33.8px; text-align: start; letter-spacing: -1.04px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Easy setup</h5></div></div><div data-framer-name="Create your workspace and invite your team. Get everything ready in minutes." data-framer-component-type="RichTextContainer" style="justify-content: flex-end; --extracted-r6o4lv: var(--token-25ff31ab-0d05-46b8-8f6f-323a44bc9868, rgb(96, 95, 95)); --framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 222.663px; height: 67.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; opacity: 1; overflow: visible; cursor: crosshair;"><p data-styles-preset="xEbsc9wJk" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-25ff31ab-0d05-46b8-8f6f-323a44bc9868, rgb(96, 95, 95))); display: block; position: static; width: 222.663px; height: 67.2px; border: 0px none rgb(96, 95, 95); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(96, 95, 95); font-family: Geist, "Geist Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 22.4px; text-align: start; letter-spacing: -0.48px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Create your workspace and invite your team. Get everything ready in minutes.</p></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 222.663px; height: 292px; max-width: 350px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Default" style="height: 292px; max-width: 100%; width: 222.663px; border-radius: 16px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; padding: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: flex-start; gap: 10px; opacity: 1; overflow: hidden; cursor: crosshair;"><div data-border="true" data-framer-name="Step Card-1" style="--border-bottom-width: 2px; --border-color: var(--token-3231f815-59bd-4709-9984-27f462c2029e, rgb(255, 255, 255)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.25) -2px 4px 15px 0px; transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 219.188px; height: 351px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 2; overflow: visible; cursor: crosshair;"><div data-framer-background-image-wrapper="true" style="position: absolute; border-radius: 16px; corner-shape: inherit; inset: 0px; display: block; width: 219.188px; height: 351px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><img decoding="auto" loading="lazy" width="640" height="857" sizes="calc((min(max((calc(max(((calc(min(100vw, 1200px) - 160px) - 16px) * 0.75 - 16px) / 3, 50px) * 2 + 8px) - 64px) / 2, 1px), 350px) - 40px) * 1.2)" srcset="https://framerusercontent.com/images/hYqXfHm4SLL09lb8eXINkwGpaY.png 640w" src="https://framerusercontent.com/images/hYqXfHm4SLL09lb8eXINkwGpaY.png" alt="" style="display: block; width: 219.188px; height: 351px; border-radius: 16px; corner-shape: inherit; object-position: left top; object-fit: cover; cursor: crosshair; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;"></div></div><div data-framer-name="BG" style="border-radius: 16px; transform: none; transform-origin: 50% 50% 0px; display: block; position: absolute; width: 222.663px; height: 292px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 1; overflow: hidden; cursor: crosshair;"><div data-framer-background-image-wrapper="true" style="position: absolute; border-radius: 16px; corner-shape: inherit; inset: 0px; display: block; width: 222.663px; height: 292px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><img decoding="auto" loading="lazy" width="640" height="427" sizes="min(max((calc(max(((calc(min(100vw, 1200px) - 160px) - 16px) * 0.75 - 16px) / 3, 50px) * 2 + 8px) - 64px) / 2, 1px), 350px)" srcset="https://framerusercontent.com/images/42I2Ca6MGWWXgCMIC2PlpemkZ0.png?scale-down-to=512 512w,https://framerusercontent.com/images/42I2Ca6MGWWXgCMIC2PlpemkZ0.png 640w" src="https://framerusercontent.com/images/42I2Ca6MGWWXgCMIC2PlpemkZ0.png" alt="" style="display: block; width: 222.663px; height: 292px; border-radius: 16px; corner-shape: inherit; object-position: center center; object-fit: cover; cursor: crosshair; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;"></div></div></div></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 250.675px; height: 340px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Default/Close" data-highlight="true" style="--border-bottom-width: 0px; --border-color: var(--token-3231f815-59bd-4709-9984-27f462c2029e, rgb(255, 255, 255)); --border-left-width: 0px; --border-right-width: 0px; --border-style: solid; --border-top-width: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(255, 255, 255, 0.7); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px; height: 340px; width: 250.675px; border-radius: 20px; transform: none; transform-origin: 50% 50% 0px; will-change: auto; display: flex; position: relative; padding: 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 16px; opacity: 1; overflow: hidden; cursor: crosshair;"><div data-framer-name="Content" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 202.675px; height: 292px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: space-between; align-items: flex-start; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="01" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-4f95a47b-73b4-4844-84d0-91caa1d28764, rgb(174, 174, 174)); --framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 21.825px; height: 25.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: crosshair;"><p data-styles-preset="J69hQ97OU" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-4f95a47b-73b4-4844-84d0-91caa1d28764, rgb(174, 174, 174))); display: block; position: static; width: 21.825px; height: 25.2px; border: 0px none rgb(174, 174, 174); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(174, 174, 174); font-family: Geist, "Geist Placeholder", sans-serif; font-size: 18px; font-weight: 400; line-height: 25.2px; text-align: start; letter-spacing: -0.54px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">02</p></div><div data-framer-name="Wrap" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 202.675px; height: 117px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-end; align-items: flex-start; gap: 16px; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Heading" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 202.675px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 8px; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Set Up" data-framer-component-type="RichTextContainer" style="--framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 202.675px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: crosshair;"><h5 data-styles-preset="Do7wzBd6Z" style="display: block; position: static; width: 202.675px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: "Albert Sans", "Albert Sans Placeholder", sans-serif; font-size: 26px; font-weight: 400; line-height: 33.8px; text-align: start; letter-spacing: -1.04px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Collaborate</h5></div></div><div data-framer-name="Create your workspace and invite your team. Get everything ready in minutes." data-framer-component-type="RichTextContainer" style="justify-content: flex-end; --extracted-r6o4lv: var(--token-25ff31ab-0d05-46b8-8f6f-323a44bc9868, rgb(96, 95, 95)); --framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 202.675px; height: 67.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; opacity: 1; overflow: visible; cursor: crosshair;"><p data-styles-preset="xEbsc9wJk" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-25ff31ab-0d05-46b8-8f6f-323a44bc9868, rgb(96, 95, 95))); display: block; position: static; width: 202.675px; height: 67.2px; border: 0px none rgb(96, 95, 95); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(96, 95, 95); font-family: Geist, "Geist Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 22.4px; text-align: start; letter-spacing: -0.48px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Assign tasks and keep communication clear. Everyone stays aligned.</p></div></div></div></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: block; position: relative; width: 248px; height: 340px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: row; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Default/Close" data-highlight="true" style="--border-bottom-width: 0px; --border-color: var(--token-3231f815-59bd-4709-9984-27f462c2029e, rgb(255, 255, 255)); --border-left-width: 0px; --border-right-width: 0px; --border-style: solid; --border-top-width: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(255, 255, 255, 0.7); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px; height: 340px; width: 248px; border-radius: 20px; transform: none; transform-origin: 50% 50% 0px; will-change: auto; opacity: 1; display: flex; position: relative; padding: 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 16px; overflow: hidden; cursor: crosshair;"><div data-framer-name="Content" style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 200px; height: 292px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: space-between; align-items: flex-start; overflow: visible; cursor: crosshair;"><div data-framer-name="01" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-4f95a47b-73b4-4844-84d0-91caa1d28764, rgb(174, 174, 174)); --framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 21.9px; height: 25.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: crosshair;"><p data-styles-preset="J69hQ97OU" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-4f95a47b-73b4-4844-84d0-91caa1d28764, rgb(174, 174, 174))); display: block; position: static; width: 21.9px; height: 25.2px; border: 0px none rgb(174, 174, 174); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(174, 174, 174); font-family: Geist, "Geist Placeholder", sans-serif; font-size: 18px; font-weight: 400; line-height: 25.2px; text-align: start; letter-spacing: -0.54px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">03</p></div><div data-framer-name="Wrap" style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 200px; height: 117px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-end; align-items: flex-start; gap: 16px; overflow: visible; cursor: crosshair;"><div data-framer-name="Heading" style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 200px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 8px; overflow: visible; cursor: crosshair;"><div data-framer-name="Set Up" data-framer-component-type="RichTextContainer" style="--framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 200px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: crosshair;"><h5 data-styles-preset="Do7wzBd6Z" style="display: block; position: static; width: 200px; height: 33.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: "Albert Sans", "Albert Sans Placeholder", sans-serif; font-size: 26px; font-weight: 400; line-height: 33.8px; text-align: start; letter-spacing: -1.04px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Track growth</h5></div></div><div data-framer-name="Create your workspace and invite your team. Get everything ready in minutes." data-framer-component-type="RichTextContainer" style="justify-content: flex-end; --extracted-r6o4lv: var(--token-25ff31ab-0d05-46b8-8f6f-323a44bc9868, rgb(96, 95, 95)); --framer-paragraph-spacing: 0px; transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 200px; height: 67.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; overflow: visible; cursor: crosshair;"><p data-styles-preset="xEbsc9wJk" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-25ff31ab-0d05-46b8-8f6f-323a44bc9868, rgb(96, 95, 95))); display: block; position: static; width: 200px; height: 67.2px; border: 0px none rgb(96, 95, 95); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(96, 95, 95); font-family: Geist, "Geist Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 22.4px; text-align: start; letter-spacing: -0.48px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Use dashboards to monitor progress, trends, and what matters most.</p></div></div></div></div></div></div></div>
create a canvas to display a feature component. we want the feature component to be centered and the space around it to be flexible empty.
reproduce this feature component
Created by: LandingHero
