<div class="row bg-yellow is-hidden js-info-banner padding-top-s3 padding-bottom-s3">
    <div class="container">
        <div class="grid">
            <div class="grid__cell grid__cell--s12 grid__cell--m12 grid__cell--l12 grid__cell--xl12">
                <div class="flex flex--v-center flex--h-space-between font-HNL5-s font-HNL4-m">
                    <div><span class="flex flex--v-center"><div class="flex flex--v-center margin-right-s2"><div class="icon "><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg data-name="Layer 1" viewBox="0 0 26 26"><path class="cls-1" d="M15.25 19.34H14v-7.27a1 1 0 0 0-1-1h-2.25a1 1 0 0 0 0 2H12v6.26h-1.25a1 1 0 0 0 0 2h4.5a1 1 0 1 0 0-2z"></path><circle class="cls-1" cx="13" cy="6.79" r="2.13"></circle></svg></svg></div></div><div class="first-para-no-margin">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat dictum nisi vel malesuada. Aenean consectetur pretium sodales. In convallis nibh enim, at euismod justo bibendum id.</div></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
// @flow

import {spacing, grid, font} from '../../../utils/classnames';
import Icon from '../Icon/Icon';

type Props = {|
  cookieName?: string,
  text: string
|}

const InfoBanner = ({cookieName, text}: Props) => (
  <div
    className={`row bg-yellow is-hidden js-info-banner ${spacing({s: 3}, {padding: ['top', 'bottom']})}`}
    data-cookie-name={cookieName}>
    <div className='container'>
      <div className='grid'>
        <div className={grid({s: 12, m: 12, l: 12, xl: 12})}>
          <div className={`flex flex--v-center flex--h-space-between ${font({s: 'HNL5', m: 'HNL4'})}`}>
            <div>
              <span className='flex flex--v-center'>
                <div className={`flex flex--v-center ${spacing({s: 2}, {margin: ['right']})}`}>
                  <Icon name='information' />
                </div>
                <div className='first-para-no-margin' dangerouslySetInnerHTML={{ __html: text }} />
              </span>
            </div>
            {cookieName && <div>
              <button className="no-margin no-padding plain-button pointer js-info-banner-close">
                <Icon name='cross' title='Close notification' />
              </button>
            </div>}
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default InfoBanner;
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat dictum nisi vel malesuada. Aenean consectetur pretium sodales. In convallis nibh enim, at euismod justo bibendum id."
}

There are no notes for this item.