Hatch Logo
/

<SimpleBanner> Component

Share
Code Editor
<SimpleBanner text="Text" />

In gray, 'light' theme

Share
Code Editor
<SimpleBanner

  theme="light"

  backgroundColor="var(--hdc-gray-40)"

  text={<>

      Save 15% sitewide this fall for a limited time!&nbsp;

      <a style={{ textDecoration: 'underline' }} href="#">

        Shop Now

      </a>

    </>}

/>

In navy; 'dark' theme

Share
Code Editor
<SimpleBanner

  theme="dark"

  backgroundColor="var(--hdc-navy-900)"

  text={<>

      Save 15% sitewide this fall for a limited time!&nbsp;

      <a style={{ textDecoration: 'underline' }} href="#">

        Shop Now

      </a>

    </>}

/>

In mint; 'light' theme

Share
Code Editor
<SimpleBanner

  theme="light"

  backgroundColor="var(--hdc-mint)"

  text={<>

      Save 15% sitewide this fall for a limited time!&nbsp;

      <a style={{ textDecoration: 'underline' }} href="#">

        Shop Now

      </a>

    </>}

/>