Component library

Showing 10 components on linkedin · intent release.

<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>

<ReleasePost>

linkedinlandscapereleasePosts

Finished release announcement graphic (1200×627).

When to use: Product releases and version launches on LinkedIn.

Preview

Product release

v2.4

Workflow versioning is live

Pin production definitions. Promote through dev, staging, and production.

Read the changelog →

Prop	Type	Notes
headline	string	Required. Release headline.
body	ReactNode	Required. Release summary.
version	string	Optional. Version badge, e.g. 2.4.
eyebrow	string	Optional. Default: `Product release`. Category label.
ctaLabel	string	Optional. Optional CTA line (no link).
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `vivid`. Canvas background token.

Examples

<ReleasePost
  version="2.4"
  headline="Workflow versioning is live"
  body={<>Pin production definitions. Promote through dev, staging, and production.</>}
  ctaLabel="Read the changelog"
/>

<MilestonePost>

linkedinsquaremilestonereleasePosts

Finished milestone metric graphic (1080×1080).

When to use: Customer counts, uptime, or launch milestones.

Preview

Workflows in production

Across finance, operations, and HR teams.

Prop	Type	Notes
value	string	Required. Headline metric.Example: `100`
label	string	Required. Metric label.Example: `Enterprise deployments`
body	ReactNode	Optional. Supporting line.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `brand`. Canvas background token.

Examples

<MilestonePost value="50" label="Workflows in production" body={<>Across finance, operations, and HR teams.</>} />

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

Workflow versioning is live

Examples

Preview

Workflows in production

Examples