Snippet Library

Copy any snippet below and paste it into the HTML editor of a Static Content block (Admin → Settings → Themes).

1. Full-Width Banner with CTA

<div style="position:relative;overflow:hidden;background:#2D0D2E;">
  <img src="/storage/sudha-images/banner-collection.jpg" alt="Collection" style="width:100%;height:420px;object-fit:cover;opacity:0.5;">
  <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;">
    <p style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:4px;color:#D4AF37;">YOUR SUBTITLE</p>
    <h2 style="font-family:'DM Serif Display',serif;font-size:36px;color:#fff;margin:12px 0;">Your Heading</h2>
    <a href="/your-link" style="display:inline-block;margin-top:16px;padding:14px 32px;background:#D4AF37;color:#2D0D2E;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:2px;border-radius:50px;text-decoration:none;">Shop Now</a>
  </div>
</div>

2. Two-Column (Image + Text)

<div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1200px;margin:40px auto;padding:0 20px;align-items:center;">
  <img src="/storage/your-image.jpg" alt="Image" style="width:100%;border-radius:12px;">
  <div>
    <p style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:#D4AF37;margin-bottom:8px;">SUBTITLE</p>
    <h2 style="font-family:'DM Serif Display',serif;font-size:28px;color:#2D0D2E;margin:0 0 16px;">Your Heading</h2>
    <p style="font-size:15px;line-height:1.7;color:#555;">Your description text goes here.</p>
    <a href="/your-link" style="display:inline-block;margin-top:20px;padding:12px 28px;background:#D4AF37;color:#2D0D2E;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:50px;text-decoration:none;">Learn More</a>
  </div>
</div>

3. Three Feature Cards

<div style="background:#FAF7F8;padding:60px 20px;text-align:center;">
  <h2 style="font-family:'DM Serif Display',serif;font-size:32px;color:#2D0D2E;margin-bottom:40px;">Your Section Title</h2>
  <div style="max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;">
    <div style="padding:24px;">
      <div style="font-size:32px;margin-bottom:12px;">🚚</div>
      <h3 style="font-size:18px;color:#2D0D2E;margin-bottom:8px;">Feature One</h3>
      <p style="font-size:14px;color:#666;">Description text</p>
    </div>
    <div style="padding:24px;">
      <div style="font-size:32px;margin-bottom:12px;">🌍</div>
      <h3 style="font-size:18px;color:#2D0D2E;margin-bottom:8px;">Feature Two</h3>
      <p style="font-size:14px;color:#666;">Description text</p>
    </div>
    <div style="padding:24px;">
      <div style="font-size:32px;margin-bottom:12px;">🏆</div>
      <h3 style="font-size:18px;color:#2D0D2E;margin-bottom:8px;">Feature Three</h3>
      <p style="font-size:14px;color:#666;">Description text</p>
    </div>
  </div>
</div>

4. Promo Bar

<div style="background:#D4AF37;padding:16px 20px;text-align:center;">
  <p style="font-size:14px;font-weight:600;color:#2D0D2E;text-transform:uppercase;letter-spacing:2px;margin:0;">
    🎉 FESTIVAL SALE — Flat 20% Off on All Dance Jewellery! Use Code: DANCE20
  </p>
</div>

5. Testimonial Card

<div style="background:#FAF7F8;padding:60px 20px;text-align:center;">
  <h2 style="font-family:'DM Serif Display',serif;font-size:28px;color:#2D0D2E;margin-bottom:32px;">What Our Customers Say</h2>
  <div style="max-width:600px;margin:0 auto;background:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 12px rgba(0,0,0,0.06);">
    <p style="font-size:32px;color:#D4AF37;margin-bottom:8px;">&ldquo;</p>
    <p style="font-size:15px;line-height:1.7;color:#444;font-style:italic;margin-bottom:20px;">The jewellery quality is amazing! My daughter looked stunning at her Arangetram.</p>
    <p style="font-weight:600;font-size:14px;color:#2D0D2E;">— Lakshmi P., Hyderabad</p>
  </div>
</div>