Announcement

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';
```

<rh-announcement>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
```

<rh-context-demo>
  <rh-announcement>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
    <rh-cta slot="cta" href="#">Learn More</rh-cta>
  </rh-announcement>
</rh-context-demo>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';
```

<rh-announcement dismissable="">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit ipsum dolor sit.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<rh-announcement dismissable="" color-palette="dark" image-position="inline-start">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>An announcement with <code>inline-start</code> for the value of <code>image position</code>.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<rh-announcement dismissable="" image-position="block-start">
  <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
    <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect>
    <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
  Image
    </text>
  </svg>
  <p>An announcement with <code>block-start</code> for the value of <code>image position</code>.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';

const getAnnouncement = document.querySelector('rh-announcement');
getAnnouncement.addEventListener('close', closeEvent);

// Replace with custom close event logic:
function closeEvent() {
  window.alert('Close event fired.')
}
```

<rh-announcement dismissable="">
  <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
    <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect>
    <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
  Image
    </text>
  </svg>
  <p>Click the close button to fire the <code>close</code> event.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';
```

<rh-announcement image-position="inline-start">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>On mobile viewports, the image will stay to the left (inline-start) of this main body content.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<rh-announcement image-position="block-start" color-palette="dark">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>In this <code>block-start</code> version, the image stays on top of the body content on mobile viewports.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
```