Component library

Showing 7 components · landscape · 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.
    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>

  • <PostCta>

    linkedinlandscapecarouselblogcase-studyeventreleaseproduct-updatePosts

    Text link CTA with arrow.

    When to use: Blog promos, changelog links, event registration.

    Preview

    Read the changelog →
    PropTypeNotes
    labelstringRequired. Link label.Example: Read the article
    hrefstringRequired. 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

    Product screenshot
    PropTypeNotes
    srcstringOptional. Image URL.
    altstringOptional. Alt text.
    captionstringOptional. Caption under the image.

    Examples

    <PostMedia src="/assets/example.png" alt="Product screenshot" />

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