Component library

Showing 7 components · square · intent event.

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

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

  • <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.
    PropTypeNotes
    headlinestringRequired. Post headline.
    bodyReactNodeOptional. Optional supporting copy.
    eyebrowstringOptional. Optional category label.
    mediaSrcstringOptional. Optional hero image URL.
    mediaAltstringOptional. Hero image alt text.

    Examples

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

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