National Rugby League

Badge Box: On Dark Background 

<div class="u-t-bg-color-tint-rm u-spacing-p-24">

      <div class="o-date-box u-bg-glass t-dolphins o-rounded-box u-flex-center u-spacing-p-zero">
          <img alt="" class="u-size-36" loading="lazy" src="/Client/dist/logos/dolphins-badge-light.svg?bust&#x3D;202212061" />
      </div>

  </div>
 
{{#if onDarkBg}}
  <div class="u-t-bg-color-tint-rm u-spacing-p-24">
{{/if}}

    <div class="o-date-box {{additionalClass}} t-{{theme.key}} o-rounded-box u-flex-center u-spacing-p-zero">
      {{> @logo
        class="u-size-36"
        theme=theme
        variants='["badge-light.svg", "badge.svg"]'
      }}
    </div>

{{#if onDarkBg}}
  </div>
{{/if}}
 
{
  "additionalClass": "u-bg-glass",
  "theme": {
    "key": "dolphins",
    "logoVariants": [
      "badge-light.svg",
      "badge.svg"
    ]
  },
  "onDarkBg": true
}

Do not render this variant inside other templates. It is just to demonstrate the glass effect on a dark background.