← Back to Component Reference

Composed Examples

Full story compositions showing how to combine multiple stickers.

Combined Story

A story with multiple sticker types.

Summer Vibes 

<insta-story>
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;background:#1a0a2e"></div>
  <p style="position:absolute;left:250px;top:150px;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:400px"></insta-hashtag>
  <insta-mention username="vacations" style="position:absolute;left:100px;top:600px" design="rainbow"></insta-mention>
  <insta-location location="Malibu Beach" style="position:absolute;left:100px;top:800px"></insta-location>
  <insta-link url="https://example.com/deals" text="Book Now" style="position:absolute;left:100px;top:1000px" design="rainbow"></insta-link>
  <insta-poll question="Best season to travel?" options='["Summer", "Winter"]' style="position:absolute;left:100px;top:1250px"></insta-poll>
</insta-story>

Flexbox Layout

Use CSS flexbox instead of absolute positioning for responsive sticker layout.

Flex Layout! 

<insta-story>
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;background:#2c1654"></div>
  <div style="position:relative;display:flex;flex-direction:column;align-items:center;gap:40px;padding:150px 100px 0">
    <p style="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-location location="Berlin" style="transform:rotate(-2deg)"></insta-location>
    <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

Place an <img> tag inside the story for a photo background.

Mountain Views 

<insta-story>
  <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1080&h=1920&fit=crop" style="position:absolute;width:100%;height:100%;object-fit:cover">
  <div style="position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:100%;box-sizing:border-box;padding:0 80px 350px;gap:40px">
    <p style="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

Use the src attribute for a video background, overlaid with stickers.

Ocean Waves 

<insta-story src="https://assets.mixkit.co/videos/1164/1164-1080.mp4">
  <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:50px;padding:0 80px">
    <p style="font-family:'Instagram Sans Condensed';font-size:110px;color:#ffffff;font-weight:bold">
      Ocean Waves
    </p>
    <insta-countdown title="VACATION" end-time="2026-12-03T00:00:00"></insta-countdown>
    <insta-hashtag hashtag="beachlife"></insta-hashtag>
  </div>
</insta-story>