← Back to Component Reference

Composed Examples

Full story compositions showing how to combine multiple stickers.

Flex Column Layout

The recommended layout: one flex column holds every sticker, the browser spaces them with `gap` and the padding keeps them inside the safe zone. Stickers never overlap, whatever their text.

Flex Layout! 

<insta-story>
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;background:#2c1654"></div>
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:300px 40px;display:flex;flex-direction:column;align-items:center;gap:40px">
    <p style="margin:0;font-family:'Instagram Sans Condensed';font-size:100px;color:#ffffff;font-weight:bold">
      Flex Layout!
    </p>
    <insta-hashtag hashtag="flexbox" style="transform:rotate(-3deg)"></insta-hashtag>
    <insta-mention username="shoplocal" design="rainbow" style="transform:rotate(2deg)"></insta-mention>
    <insta-link url="https://example.com/shop" text="Shop Now" style="transform:rotate(3deg)"></insta-link>
    <insta-question question="What should we post next?" color="purple"></insta-question>
  </div>
</insta-story>

Background Image

An <img> fills the story as photo background. The flex column is anchored at the bottom with `justify-content:flex-end`, so the upper part of the photo stays visible.

Mountain Views 

<insta-story>
  <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1080&h=1920&fit=crop" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover">
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:300px 40px;display:flex;flex-direction:column;align-items:center;gap:40px;justify-content:flex-end">
    <p style="margin:0;font-family:'Instagram Sans Condensed';font-size:110px;color:#ffffff;font-weight:bold">
      Mountain Views
    </p>
    <insta-location location="Yosemite National Park" style="transform:scale(0.85) rotate(-2deg)"></insta-location>
    <insta-hashtag hashtag="wanderlust"></insta-hashtag>
    <insta-quiz question="Highest peak?" options='["El Capitan", "Half Dome", "Mt Dana"]' correct-answer="2"></insta-quiz>
  </div>
</insta-story>

Background Video

The `src` attribute plays a video as background. The stickers are centered on top of it with `justify-content:center`.

Ocean Waves 

<insta-story src="https://assets.mixkit.co/videos/1164/1164-1080.mp4">
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:300px 40px;display:flex;flex-direction:column;align-items:center;gap:40px;justify-content:center">
    <p style="margin:0;font-family:'Instagram Sans Condensed';font-size:110px;color:#ffffff;font-weight:bold">
      Ocean Waves
    </p>
    <insta-countdown title="VACATION" end-time="2027-01-18T00:00:00"></insta-countdown>
    <insta-hashtag hashtag="beachlife"></insta-hashtag>
  </div>
</insta-story>

Absolute Positioning

Pixel-exact placement, for a sticker that has to sit on a specific spot of the background. You have to leave room for the rendered sticker sizes yourself: pill stickers are 177px tall, so a step of 220px leaves a gap of 43px.

Summer Vibes 

<insta-story>
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;background:#1a0a2e"></div>
  <p style="position:absolute;left:0;top:300px;width:100%;margin:0;text-align:center;font-family:'Instagram Sans Condensed';font-size:120px;color:#ffd93d;font-weight:bold">
    Summer Vibes
  </p>
  <insta-hashtag hashtag="summer2026" style="position:absolute;left:100px;top:500px"></insta-hashtag>
  <insta-mention username="vacations" style="position:absolute;left:100px;top:720px" design="rainbow"></insta-mention>
  <insta-location location="Malibu Beach" style="position:absolute;left:100px;top:940px"></insta-location>
  <insta-link url="https://example.com/deals" text="Book Now" style="position:absolute;left:100px;top:1160px" design="rainbow"></insta-link>
</insta-story>