{"success":true,"data":{"block":{"id":"about-mission-principles","name":"About Mission Principles","title":"About Mission Principles","category":"About","categorySlug":"about","description":"A comprehensive mission statement section with numbered principle cards and a vision callout. Features a two-column grid with mission text on left, principle cards on right, followed by a full-width vision banner. Best for company about pages, mission statements, and values showcases.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291142/wujohbv3x20d67t11sc04qxayqap/cleanshot-2026-02-25-at-12-26-06-2x.png","mobile":"https://cdn.ing/assets/i/r/291141/vgz38n0pswtr7e7udc7y6mstzime/cleanshot-2026-02-25-at-12-26-28-2x.png"},"componentPath":"blocks/about/about-mission-principles.tsx","code":"import { AboutMissionPrinciples } from \"@opensite/ui/blocks/about/about-mission-principles\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutMissionPrinciples\n      badgeText=\"Our Mission\"\n      missionHeading=\"Empowering People Through Technology\"\n      missionDescription=\"We believe technology should serve humanity—making life simpler, work more meaningful, and connections stronger. Our mission is to build tools that amplify human potential and create opportunities for everyone.\"\n      missionAction={{\n        label: \"Read Our Story\",\n        href: \"#\",\n        variant: \"default\",\n      }}\n      principles={[\n        {\n          number: \"01\",\n          title: \"Customer-Centric\",\n          description:\n            \"Every decision starts with understanding our customers' needs. We obsess over their experience and measure our success by their success.\",\n        },\n        {\n          number: \"02\",\n          title: \"Built to Last\",\n          description:\n            \"We prioritize long-term value over short-term gains. Quality, security, and reliability are non-negotiable.\",\n        },\n        {\n          number: \"03\",\n          title: \"Inclusive by Design\",\n          description:\n            \"We build for everyone. Accessibility, diversity, and inclusion are embedded in our product development and company culture.\",\n        },\n        {\n          number: \"04\",\n          title: \"Continuous Learning\",\n          description:\n            \"We stay curious and humble. Markets change, technology evolves, and we adapt by listening, learning, and improving every day.\",\n        },\n      ]}\n      visionHeading=\"Our Vision for 2030\"\n      visionDescription=\"By 2030, we aim to be the most trusted platform for teams worldwide—known for innovation, reliability, and positive impact on people's work and lives.\"\n      visionAction={{\n        label: \"View Our Roadmap\",\n        href: \"#\",\n        variant: \"outline\",\n        size: \"lg\",\n      }}\n      background=\"gray\"\n      pattern=\"noise\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text","typeLabel":"React.ReactNode","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"missionHeading":{"type":"object","description":"Main mission statement heading","typeLabel":"React.ReactNode","required":false},"missionHeadingClassName":{"type":"string","description":"Additional CSS classes for the mission heading","required":false},"missionDescription":{"type":"object","description":"Mission description text","typeLabel":"React.ReactNode","required":false},"missionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the mission description","required":false},"missionAction":{"type":"object","description":"Mission CTA action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"missionActionSlot":{"type":"object","description":"Custom slot for rendering mission CTA (overrides missionAction)","typeLabel":"React.ReactNode","required":false},"missionActionClassName":{"type":"string","description":"Additional CSS classes for the mission action","required":false},"principles":{"type":"array","description":"Array of principle items","items":{"type":"object","description":"","fields":{"number":{"type":"object","description":"Principle number (e.g., \"01\", \"02\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Principle title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Principle description","typeLabel":"React.ReactNode","required":false}},"typeLabel":"AboutMissionPrincipleItem"},"typeLabel":"AboutMissionPrincipleItem[]","required":false},"principlesSlot":{"type":"object","description":"Custom slot for rendering principles (overrides principles array)","typeLabel":"React.ReactNode","required":false},"principlesClassName":{"type":"string","description":"Additional CSS classes for the principles container","required":false},"visionHeading":{"type":"object","description":"Vision section heading","typeLabel":"React.ReactNode","required":false},"visionHeadingClassName":{"type":"string","description":"Additional CSS classes for the vision heading","required":false},"visionDescription":{"type":"object","description":"Vision section description","typeLabel":"React.ReactNode","required":false},"visionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the vision description","required":false},"visionAction":{"type":"object","description":"Vision CTA action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"visionActionSlot":{"type":"object","description":"Custom slot for rendering vision CTA (overrides visionAction)","typeLabel":"React.ReactNode","required":false},"visionClassName":{"type":"string","description":"Additional CSS classes for the vision section","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","mission","principles","values","vision","company","culture","numbered","cards"],"performance":{},"importantUsageNotes":"Only use this block if you have 4 `principles` props, any different count than 4 will distort the layout. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:47:57.921Z"}