Do you have full-width callouts?


Callouts, or UI boxes, are often used to highlight alerts, warnings, and other key information. They work best when they span the full width of the screen, making the message clear and hard to miss.

Full-width callouts use space effectively, pull focus to the content, and add a strong, immersive feel to the page.

limited width box
Figure: Bad example - Box doesn't look right

full width box
Figure: Good example - Box looks great

✅ Design advantages

  • Enhance visual impact - Stretching edge-to-edge creates a modern, cinematic feel that’s perfect for rich visuals and content-heavy layouts
  • Work beautifully on all devices - They adapt smoothly to any screen size, especially mobile, for a seamless experience everywhere
  • Make the most of space - No more wasted margins on big screens; every pixel is put to good use
  • Give designers more freedom - Full-width layouts allow creative use of images, backgrounds, and flow, great for storytelling or product showcases

We open source.Loving SSW Rules? Star us on GitHub. Star
Stand by... we're migrating this site to TinaCMS