Component library

Showing 9 components · landscape · intent product-update.

<PostFrame>

linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts

Platform chrome wrapper with aspect ratio from dimension.

When to use: Root wrapper for every post preview. Set platform and dimension to match the target feed.

Preview

LinkedInlandscape

Product release

Workflow versioning is live

Pin production definitions. Promote through dev → staging → prod.

Prop	Type	Notes
platform	"linkedin" \| "instagram"	Required. Target social platform.Values: linkedin, instagram
dimension	"square" \| "portrait" \| "landscape" \| "carousel"	Required. Layout aspect ratio.Values: square, portrait, landscape, carousel
children	ReactNode	Required. Post body.

Examples

<PostFrame platform="linkedin" dimension="landscape">
  <PostEyebrow>Product release</PostEyebrow>
  <PostHeadline>Workflow versioning is live</PostHeadline>
  <PostBody>Pin production definitions. Promote through dev → staging → prod.</PostBody>
</PostFrame>

<PostEyebrow>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts
Small uppercase label above the headline (intent or category).
When to use: Surface what the post is for inside the preview card.
Preview
Product release
Prop Type Notes
children ReactNode Required. Eyebrow label text.
Examples
```
<PostEyebrow>Product release</PostEyebrow>
```
<PostHeadline>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts
Primary post headline.
When to use: Hook line visible in the feed preview.
Preview
Your first AI agent, live in 2 weeks
Prop Type Notes
children ReactNode Required. Headline text.
Examples
```
<PostHeadline>Your first AI agent, live in 2 weeks</PostHeadline>
```
<PostBody>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts
Post copy body.
When to use: Main prose after the headline.
Preview
Flat licence. Unlimited usage. Self-hosted from day one.
Prop Type Notes
children ReactNode Required. Body copy.
Examples
```
<PostBody>Flat licence. Unlimited usage. Self-hosted from day one.</PostBody>
```
<PostCta>
linkedinlandscapecarouselblogcase-studyeventreleaseproduct-updatePosts
Text link CTA with arrow.
When to use: Blog promos, changelog links, event registration.
Preview
Read the changelog →
Prop Type Notes
label string Required. Link label.Example: Read the article
href string Required. Destination URL.Example: https://lunnoa.com/blog/example
Examples
```
<PostCta label="Read the changelog" href="https://lunnoa.com/changelog" />
```
<PostMedia>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventmilestonePosts
Image block with optional caption; shows placeholder when src omitted.
When to use: Hero image or carousel slide visual.
Preview
Prop Type Notes
src string Optional. Image URL.
alt string Optional. Alt text.
caption string Optional. Caption under the image.
Examples
```
<PostMedia src="/assets/example.png" alt="Product screenshot" />
```

Prop	Type	Notes
children	ReactNode	Required. Eyebrow label text.

Prop	Type	Notes
children	ReactNode	Required. Headline text.

Prop	Type	Notes
children	ReactNode	Required. Body copy.

Prop	Type	Notes
label	string	Required. Link label.Example: `Read the article`
href	string	Required. Destination URL.Example: `https://lunnoa.com/blog/example`

Prop	Type	Notes
src	string	Optional. Image URL.
alt	string	Optional. Alt text.
caption	string	Optional. Caption under the image.

<LinkedInTextPost>

linkedinlandscapereleaseproduct-updateblogthought-leadershipmilestonePosts

Convenience layout: LinkedIn landscape text post with optional media and CTA.

When to use: Release notes, product updates, thought leadership on LinkedIn.

Preview

LinkedInlandscape

Product update

Environment promotion is live

Move workflow definitions from dev to staging to production with audit trail.

Read the docs →

Prop	Type	Notes
headline	string	Required. Post headline.
body	ReactNode	Required. Post body copy.
eyebrow	string	Optional. Optional category label.
ctaLabel	string	Optional. CTA link label.
ctaHref	string	Optional. CTA destination URL.
mediaSrc	string	Optional. Optional hero image URL.
mediaAlt	string	Optional. Hero image alt text.

Examples

<LinkedInTextPost
  eyebrow="Product update"
  headline="Environment promotion is live"
  body="Move workflow definitions from dev to staging to production with audit trail."
  ctaLabel="Read the docs"
  ctaHref="https://lunnoa.com/docs"
/>

<PostCanvas>

linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts

Fixed-pixel artboard at platform export dimensions (1080×1080, 1080×1350, 1200×627).

When to use: Build custom finished graphics when no intent template fits. Prefer ReleasePost, BlogPromoPost, etc. for standard jobs.

Preview

Custom

Headline on a finished artboard

Prop	Type	Notes
dimension	"square" \| "portrait" \| "landscape" \| "carousel"	Required. Export aspect ratio.Values: square, portrait, landscape, carousel
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Canvas background token.
children	ReactNode	Required. Post body.

Examples

<PostCanvas dimension="landscape" background="vivid">
  <PostEyebrow>Custom</PostEyebrow>
  <PostHeadline>Headline on a finished artboard</PostHeadline>
</PostCanvas>

<ProductUpdatePost>

linkedinlandscapeproduct-updatePosts

Finished product update graphic (1200×627) with feature highlight panel.

When to use: Feature launches and capability announcements.

Preview

Product update

Promote workflows across environments

Git-backed promotion paths mean IT governs what ships.

Now live

Dev → staging → prod

Prop	Type	Notes
headline	string	Required. Update headline.
body	ReactNode	Required. Update summary.
feature	string	Optional. Short feature callout in side panel.
eyebrow	string	Optional. Default: `Product update`. Category label.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `brand`. Canvas background token.

Examples

<ProductUpdatePost
  headline="Promote workflows across environments"
  body={<>Git-backed promotion paths mean IT governs what ships.</>}
  feature="Dev → staging → prod"
/>

Preview

Workflow versioning is live

Examples

Preview

Examples

Preview

Your first AI agent, live in 2 weeks

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Environment promotion is live

Examples

Preview

Headline on a finished artboard

Examples

Preview

Promote workflows across environments

Examples