Content Card Composite Prompt
Prompt intent
Generate a Content Card composite component that follows Yoonet AU & NZ tokens, typography, spacing, and interaction conventions.
Card with badge, title, description, and optional footer slot.
Output target
Composite layout + usage-ready code
Featured
Launch new onboarding
Build a guided flow that helps new hires reach productivity in week one.
Updated 2d ago
content card-composite-component-prompt.txtComposite Component Prompt
# Content Card - Yoonet AU & NZ Composite Component Prompt You are building a composite component named Content Card for Yoonet AU & NZ. Use the composite patterns in @/components/composite and primitives in @/components/ui. ## Active Brand Tokens --primary: hsl(231 100% 77%); /* #8A9EFF */ --primary-foreground: hsl(0 0% 100%); /* #fff */ --secondary: hsl(183 70% 76%); /* #98E9ED */ --secondary-foreground: hsl(235 22% 12%); --destructive: hsl(341 100% 70%); /* #FF6495 */ --radius: 0.5rem; --font-heading: var(--font-heading); /* Manrope */ --font-body: var(--font-body); /* Inter */ ## Composition Rules - Build from shadcn/ui primitives and existing composite patterns - Use cn() from @/lib/utils for conditional classes - No inline hex values. Use CSS variables only - Keep layout responsive with sm, md, lg breakpoints - Use accessible roles and aria attributes where needed ## Output - Return a React component with a small props interface - Include a short usage example below the component - Keep copy concise and data realistic
Recommended workflow
- Start from the composite pattern and refine content before styling.
- Validate spacing and color contrast with brand tokens.
- Check responsive behavior at mobile, tablet, and desktop sizes.