Component library

Showing 6 components · portrait · 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>

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