Component library

Showing 8 components on linkedin · portrait.

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

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

  • <HiringPost>

    linkedinportraithiringPosts

    Finished hiring graphic (1080×1350 portrait).

    When to use: Open role announcements.

    Preview

    We're hiring

    Engineering

    Senior platform engineer

    Build the self-hosted agent runtime our enterprise customers run on their own infrastructure.
    Apply now
    PropTypeNotes
    rolestringRequired. Job title.
    teamstringOptional. Team or department.
    bodyReactNodeRequired. Role summary.
    applyLabelstringOptional. Default: Apply now. CTA button label.
    background"light" | "white" | "dark" | "brand" | "vivid"Optional. Default: vivid. Canvas background token.

    Examples

    <HiringPost
  role="Senior platform engineer"
  team="Engineering"
  body={<>Build the self-hosted agent runtime our enterprise customers run on their own infrastructure.</>}
/>

  • <EventPost>

    linkedinportraiteventPosts

    Finished event promo graphic (1080×1350 portrait).

    When to use: Webinars, conferences, and launch events.

    Preview

    Event

    15 July 2026 · 14:00 BST

    Self-hosted AI agents workshop

    Virtual

    Live build session: your first agent in two weeks.
    PropTypeNotes
    titlestringRequired. Event name.
    whenstringRequired. Date or time window.
    bodyReactNodeRequired. Event description.
    locationstringOptional. Venue or virtual.
    background"light" | "white" | "dark" | "brand" | "vivid"Optional. Default: brand. Canvas background token.

    Examples

    <EventPost
  title="Self-hosted AI agents workshop"
  when="15 July 2026 · 14:00 BST"
  location="Virtual"
  body={<>Live build session: your first agent in two weeks.</>}
/>