{"success":true,"data":{"block":{"id":"about-expandable-values","name":"About Expandable Values","title":"About Expandable Values","category":"About","categorySlug":"about","description":"An interactive values section with expandable cards that reveal detailed descriptions and examples when clicked. Features a responsive grid of value cards that expand to full width when active, with icon integration and example lists. Best for company values pages, culture showcases, and brand identity sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290833/arzkvvfgv74roz78jc2unsbikka5/cleanshot-2026-02-25-at-04-08-16.png","mobile":"https://cdn.ing/assets/i/r/290832/7ymisv2akhfqlqkmvt7e1c44v6cs/cleanshot-2026-02-25-at-04-08-36.png"},"componentPath":"blocks/about/about-expandable-values.tsx","code":"import { AboutExpandableValues } from \"@opensite/ui/blocks/about/about-expandable-values\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutExpandableValues\n      badgeText=\"Our Core Values\"\n      heading=\"The Principles That Guide Us\"\n      description=\"These aren't just words on a wall—they're the foundation of every decision we make and the compass that guides our journey.\"\n      values={[\n        {\n          id: \"integrity\",\n          icon: <DynamicIcon name=\"lucide/shield\" size={24} />,\n          title: \"Integrity\",\n          shortDescription: \"Doing what's right, even when no one is watching.\",\n          longDescription:\n            \"We believe honesty and transparency are the bedrock of trust. In every interaction—with customers, partners, and each other—we choose authenticity over convenience. We admit mistakes, keep our promises, and hold ourselves accountable to the highest ethical standards.\",\n          examples: [\n            \"Transparent pricing with no hidden fees\",\n            \"Honest communication about product limitations\",\n            \"Clear data privacy policies and practices\",\n            \"Speaking up when we see something wrong\",\n          ],\n        },\n        {\n          id: \"excellence\",\n          icon: <DynamicIcon name=\"lucide/award\" size={24} />,\n          title: \"Excellence\",\n          shortDescription: \"Striving for quality in everything we create.\",\n          longDescription:\n            \"Good enough is never good enough for us. We're obsessed with craftsmanship and continuous improvement. Whether it's a line of code, a customer email, or a product feature, we put our full energy into making it exceptional.\",\n          examples: [\n            \"Rigorous code reviews and testing standards\",\n            \"Detailed documentation for every feature\",\n            \"Regular training and skill development\",\n            \"Customer feedback drives our roadmap\",\n          ],\n        },\n        {\n          id: \"empathy\",\n          icon: <DynamicIcon name=\"lucide/heart\" size={24} />,\n          title: \"Empathy\",\n          shortDescription:\n            \"Understanding and caring about others' experiences.\",\n          longDescription:\n            \"We put ourselves in others' shoes—whether they're customers facing a problem, teammates navigating challenges, or communities affected by our work. Empathy shapes our products, our policies, and our culture.\",\n          examples: [\n            \"User research drives product decisions\",\n            \"Flexible work arrangements for all life situations\",\n            \"Active listening in every conversation\",\n            \"Accessible design is our standard, not an afterthought\",\n          ],\n        },\n        {\n          id: \"innovation\",\n          icon: <DynamicIcon name=\"lucide/lightbulb\" size={24} />,\n          title: \"Innovation\",\n          shortDescription: \"Embracing change and pushing boundaries.\",\n          longDescription:\n            \"The status quo is our starting point, not our destination. We encourage experimentation, celebrate creative thinking, and view failure as a stepping stone to breakthrough ideas. Innovation isn't just about technology—it's about finding better ways to solve problems.\",\n          examples: [\n            \"20% time for passion projects\",\n            \"Innovation challenges and hackathons\",\n            \"Safe space to test new ideas\",\n            \"Cross-functional collaboration on experiments\",\n          ],\n        },\n        {\n          id: \"community\",\n          icon: <DynamicIcon name=\"lucide/users\" size={24} />,\n          title: \"Community\",\n          shortDescription: \"Building connections and giving back.\",\n          longDescription:\n            \"We're stronger together. We invest in our internal community through mentorship and support, and we give back to the broader community through volunteering, open-source contributions, and partnerships with nonprofits.\",\n          examples: [\n            \"Volunteer time off for community service\",\n            \"Open-source contributions and sponsorships\",\n            \"Mentorship programs for underrepresented groups\",\n            \"Local charity partnerships and fundraisers\",\n          ],\n        },\n        {\n          id: \"sustainability\",\n          icon: <DynamicIcon name=\"lucide/leaf\" size={24} />,\n          title: \"Sustainability\",\n          shortDescription: \"Building for the long term, responsibly.\",\n          longDescription:\n            \"We consider the environmental and social impact of our decisions. From carbon-neutral operations to sustainable business practices, we're committed to leaving the world better than we found it.\",\n          examples: [\n            \"Carbon-neutral cloud infrastructure\",\n            \"Paperless operations and digital workflows\",\n            \"Sustainable office practices and partnerships\",\n            \"Long-term thinking over short-term gains\",\n          ],\n        },\n      ]}\n      ctaHeading=\"Want to Be Part of Our Values-Driven Team?\"\n      ctaDescription=\"We're looking for people who share these principles and want to build something meaningful together.\"\n      actions={[\n        {\n          label: \"Explore Careers\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.05}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false},"values":{"type":"array","description":"Array of value items","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the value","required":true},"icon":{"type":"object","description":"Icon element or icon name","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Value title","typeLabel":"React.ReactNode","required":false},"shortDescription":{"type":"object","description":"Short description shown when collapsed","typeLabel":"React.ReactNode","required":false},"longDescription":{"type":"object","description":"Long description shown when expanded","typeLabel":"React.ReactNode","required":false},"examples":{"type":"array","description":"Examples of how the value is practiced","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false}},"typeLabel":"AboutExpandableValueItem"},"typeLabel":"AboutExpandableValueItem[]","required":false},"valuesSlot":{"type":"object","description":"Custom slot for rendering values (overrides values array)","typeLabel":"React.ReactNode","required":false},"ctaHeading":{"type":"object","description":"Bottom CTA heading","typeLabel":"React.ReactNode","required":false},"ctaDescription":{"type":"object","description":"Bottom CTA description","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"valuesClassName":{"type":"string","description":"Additional CSS classes for the values grid","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"ctaHeadingClassName":{"type":"string","description":"Additional CSS classes for the CTA heading","required":false},"ctaDescriptionClassName":{"type":"string","description":"Additional CSS classes for the CTA description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions 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","values","expandable","interactive","cards","culture","brand","icons","accordion"],"performance":{},"importantUsageNotes":"Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:02.124Z"}