Component library

Showing 8 components · intent thought-leadership.

  • <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.
    PropTypeNotes
    platform"linkedin" | "instagram"Required. Target social platform.Values: linkedin, instagram
    dimension"square" | "portrait" | "landscape" | "carousel"Required. Layout aspect ratio.Values: square, portrait, landscape, carousel
    childrenReactNodeRequired. 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

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

    PropTypeNotes
    childrenReactNodeRequired. 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.
    PropTypeNotes
    childrenReactNodeRequired. Body copy.

    Examples

    <PostBody>Flat licence. Unlimited usage. Self-hosted from day one.</PostBody>

  • <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 →
    PropTypeNotes
    headlinestringRequired. Post headline.
    bodyReactNodeRequired. Post body copy.
    eyebrowstringOptional. Optional category label.
    ctaLabelstringOptional. CTA link label.
    ctaHrefstringOptional. CTA destination URL.
    mediaSrcstringOptional. Optional hero image URL.
    mediaAltstringOptional. 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"
/>

  • <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.
    PropTypeNotes
    headlinestringRequired. Post headline.
    bodyReactNodeRequired. Post body copy.
    eyebrowstringOptional. Optional category label.
    mediaSrcstringOptional. Optional hero image URL.
    mediaAltstringOptional. 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

    PropTypeNotes
    dimension"square" | "portrait" | "landscape" | "carousel"Required. Export aspect ratio.Values: square, portrait, landscape, carousel
    background"light" | "white" | "dark" | "brand" | "vivid"Optional. Canvas background token.
    childrenReactNodeRequired. Post body.

    Examples

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

  • <ThoughtLeadershipPost>

    linkedinlandscapethought-leadershipPosts

    Finished thought-leadership graphic (1200×627).

    When to use: Opinion pieces and executive takes on LinkedIn.

    Preview

    Business users build. IT governs.

    The split that keeps AI automation out of shadow IT.
    Lunnoa team
    PropTypeNotes
    headlinestringRequired. Core thesis.
    bodyReactNodeRequired. Supporting argument.
    authorstringOptional. Attribution line.
    background"light" | "white" | "dark" | "brand" | "vivid"Optional. Default: dark. Canvas background token.

    Examples

    <ThoughtLeadershipPost
  headline="Business users build. IT governs."
  body={<>The split that keeps AI automation out of shadow IT.</>}
  author="Lunnoa team"
/>