EMULSIF-304: Banner component.

[robherba]

Summary

Adds an banner component.

How to review this pull request

• Run npm run storybook
• Go to http://localhost:6006/?path=/story/components-banner--banner
• Ensure that the new component matches the Figma design.
• Ensure the video doesn't play when the browser doesn't allow it or when motion reduction is turned on in the system settings.

[callinmullaney]

@robherba This PR matches the design but I have some feedback for you:

1. Lets try and avoid committing images (png, gif, jpg) directly to the repository and use a free service instead. https://picsum.photos/ is what we've used for Compound and seemed to work well. Here is an example of how we crafted a URL which defines the image size. I don't think you need to make this a responsive image so a standard <img src /> should be fine: https://github.com/emulsify-ds/compound/blob/main/components/02-molecules/text-with-media/text-with-media.yml#L4C16-L4C37

2. See code comments on banner.twig

3. Lets combine the bem() and add_attributes() functions. For example:

{% set banner__attributes = {
  'data-banner-alignment': banner__alignment|default('left'),
  'class': bem(banner__base_class, banner__modifiers, banner__blockname)
} %}

<div {{ add_attributes(banner__attributes) }}> ... </div>

4. Avoid using CSS background images. Lets use the image component instead. Pull it it below all the banner content/text. Then use position:absolute, z-index, and object-fit styles. This makes wiring a lot easier and allows us to use responsive images.

[netlify]

✅ Deploy Preview for emulsify-ui-kit ready!

Name	Link
🔨 Latest commit	eb14986
🔍 Latest deploy log	https://app.netlify.com/projects/emulsify-ui-kit/deploys/68d70ec15872820008f5c2cf
😎 Deploy Preview	https://deploy-preview-152--emulsify-ui-kit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[robherba]

Hey @callinmullaney, the changes have been applied!

[sync-by-unito]

➤ Josue commented:

Hi @Callin Mullaney reviewing the backlog and PRs, we noticed you left feedback to Roberto, he already applied the feedback so tagging you to follow up the review, hopefully for this quarter maybe the contrib day (Q3 2025)

[mariannuar]

Hi @callinmullaney! When you return, could you help me with an approval here, please?