Component library

Showing 3 components on instagram · intent blog.

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

    instagramsquareportraitblogcase-studyPosts

    Finished blog or case-study promo (1080×1080 or 1080×1350).

    When to use: Blog launches and article promos on Instagram or LinkedIn.

    Preview

    New blog

    Five inboxes touch every invoice

    How finance teams map manual handovers before they automate intake.
    PropTypeNotes
    headlinestringRequired. Article headline.
    eyebrowstringOptional. Default: New blog. Category label.
    bodyReactNodeOptional. Supporting copy.
    mediaSrcstringOptional. Hero image URL.
    mediaAltstringOptional. Hero alt text.
    dimension"square" | "portrait"Optional. Default: square. Export aspect ratio.
    background"light" | "white" | "dark" | "brand" | "vivid"Optional. Default: dark. Canvas background token.

    Examples

    <BlogPromoPost
      headline="Five inboxes touch every invoice"
      body={<>How finance teams map manual handovers before they automate intake.</>}
    />