Component library

Showing 10 components · intent case-study.

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

<InstagramSquarePost>

instagramsquarereleaseproduct-updateblogcase-studyeventmilestonePosts

Convenience layout: Instagram 1:1 post with optional hero image.

When to use: Visual-first announcements and blog promos on Instagram.

Preview

Instagramsquare

New blog

Five inboxes touch every invoice

How finance teams map manual handovers before automating.

Prop	Type	Notes
headline	string	Required. Post headline.
body	ReactNode	Optional. Optional supporting copy.
eyebrow	string	Optional. Optional category label.
mediaSrc	string	Optional. Optional hero image URL.
mediaAlt	string	Optional. Hero image alt text.

Examples

<InstagramSquarePost
  eyebrow="New blog"
  headline="Five inboxes touch every invoice"
  body="How finance teams map manual handovers before automating."
/>

<InstagramPortraitPost>

instagramportraitblogcase-studyeventthought-leadershipPosts

Convenience layout: Instagram 4:5 portrait post.

When to use: Longer copy or stacked headline + image on Instagram.

Preview

Instagramportrait

Case study

Acme cut invoice triage from 38 minutes to 4

Three-way matching between invoices, POs, and goods receipts.

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

Examples

<InstagramPortraitPost
  eyebrow="Case study"
  headline="Acme cut invoice triage from 38 minutes to 4"
  body="Three-way matching between invoices, POs, and goods receipts."
/>

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

<BlogPromoPost>

instagramsquareportraitblogcase-studyPosts

Finished blog or case-study promo (1080×1080 or 1080×1350).

When to use: Blog launches and article promos on Instagram or LinkedIn.

Preview

New blog

Five inboxes touch every invoice

How finance teams map manual handovers before they automate intake.

Prop	Type	Notes
headline	string	Required. Article headline.
eyebrow	string	Optional. Default: `New blog`. Category label.
body	ReactNode	Optional. Supporting copy.
mediaSrc	string	Optional. Hero image URL.
mediaAlt	string	Optional. Hero alt text.
dimension	"square" \| "portrait"	Optional. Default: `square`. Export aspect ratio.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `dark`. Canvas background token.

Examples

<BlogPromoPost
  headline="Five inboxes touch every invoice"
  body={<>How finance teams map manual handovers before they automate intake.</>}
/>

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

Five inboxes touch every invoice

Examples

Preview

Acme cut invoice triage from 38 minutes to 4

Examples

Preview

Headline on a finished artboard

Examples

Preview

Five inboxes touch every invoice

Examples