{"success":true,"data":{"block":{"id":"process-mission-principles","name":"Process Mission Principles","title":"Process Mission Principles","category":"Process","categorySlug":"process","description":"A mission statement section with a grid of numbered principle cards. Features a prominent mission title and description followed by a responsive grid of principles, each with a floating number badge, title, and description. Ideal for company values, guiding principles, or core beliefs sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290546/3jveaktd5l5nmtmwvrxvl38vuql0/process-mission-principles-desktop.png","mobile":"https://cdn.ing/assets/i/r/290547/m0i2ea3tku5qiay99z8fze7tja36/process-mission-principles-mobile.png"},"componentPath":"blocks/process/process-mission-principles.tsx","code":"import { ProcessMissionPrinciples } from \"@opensite/ui/blocks/process/process-mission-principles\";\n\nexport default function Demo() {\n  return (\n    <ProcessMissionPrinciples\n      missionLabel=\"OUR MISSION\"\n      missionHeading=\"Empowering Teams to Build Better Products\"\n      missionDescription=\"We believe that exceptional software comes from exceptional teams. Our mission is to provide the tools, insights, and support that enable development teams to create products that users love, while maintaining velocity and quality at scale.\"\n      principlesLabel=\"OUR GUIDING PRINCIPLES\"\n      principles={[\n        {\n          number: \"01\",\n          title: \"User-Centric Design\",\n          description:\n            \"Every decision starts with the user. We prioritize intuitive interfaces, seamless experiences, and accessibility to ensure products serve their intended audience effectively.\",\n        },\n        {\n          number: \"02\",\n          title: \"Quality Over Speed\",\n          description:\n            \"While we value efficiency, we never compromise on quality. Rigorous testing, code reviews, and attention to detail ensure long-term reliability and maintainability.\",\n        },\n        {\n          number: \"03\",\n          title: \"Continuous Learning\",\n          description:\n            \"Technology evolves rapidly. We foster a culture of continuous learning, experimentation, and adaptation to stay at the forefront of innovation.\",\n        },\n        {\n          number: \"04\",\n          title: \"Transparent Communication\",\n          description:\n            \"Open, honest communication builds trust. We maintain transparency with stakeholders, document decisions clearly, and collaborate effectively across teams.\",\n        },\n        {\n          number: \"05\",\n          title: \"Data-Driven Decisions\",\n          description:\n            \"Intuition matters, but data validates. We measure what matters, analyze results objectively, and let insights guide our strategic choices.\",\n        },\n        {\n          number: \"06\",\n          title: \"Sustainable Practices\",\n          description:\n            \"Build for the long term. We create scalable architectures, write maintainable code, and establish processes that support sustainable growth without burnout.\",\n        },\n      ]}\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={0.08}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"missionLabel":{"type":"object","description":"Mission section label (e.g., \"OUR MISSION\")","typeLabel":"React.ReactNode","required":false},"missionHeading":{"type":"object","description":"Mission heading/title","typeLabel":"React.ReactNode","required":false},"missionDescription":{"type":"object","description":"Mission description text","typeLabel":"React.ReactNode","required":false},"principlesLabel":{"type":"object","description":"Principles section label (e.g., \"OUR PRINCIPLES\")","typeLabel":"React.ReactNode","required":false},"principles":{"type":"array","description":"Array of principle configurations","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},"className":{"type":"string","description":"Additional CSS classes for the principle item","required":false}},"typeLabel":"ProcessMissionPrincipleItem"},"typeLabel":"ProcessMissionPrincipleItem[]","required":false},"principlesSlot":{"type":"object","description":"Custom slot for rendering principles (overrides principles array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"missionClassName":{"type":"string","description":"Additional CSS classes for the mission section","required":false},"missionLabelClassName":{"type":"string","description":"Additional CSS classes for the mission label","required":false},"missionHeadingClassName":{"type":"string","description":"Additional CSS classes for the mission heading","required":false},"missionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the mission description","required":false},"principlesSectionClassName":{"type":"string","description":"Additional CSS classes for the principles section","required":false},"principlesLabelClassName":{"type":"string","description":"Additional CSS classes for the principles label","required":false},"principlesGridClassName":{"type":"string","description":"Additional CSS classes for the principles grid","required":false},"principleCardClassName":{"type":"string","description":"Additional CSS classes for each principle card","required":false},"principleBadgeClassName":{"type":"string","description":"Additional CSS classes for the principle number badge","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","mission","principles","values","beliefs","company","culture","numbered","grid"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3, 6, or 9 'principles' since the principles element is a 3 column layout. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:02.585Z"}