Notice bar component

<div class="m-noticeBar text-white -contentheader alert alert-dismissible fade show position-sticky" role="alert">
    <div class="m-noticeBar__content d-flex flex-row justify-content-center align-items-center">
        <strong>Geef je persoonlijke voorkeuren voor jouw nieuwbouwwoning door voor 12 april</strong>

        <span class="m-noticeBar__button ml-3">
            <button type="button" class="btn btn-outline-dark -iconRight -thin">

                Naar Mijn Keuzelijst

            </button>
        </span>

    </div>
    <button type="button" class="btn m-noticeBar__close position-absolute" data-dismiss="alert" aria-label="Close">
        <i class="icon-close"></i>
    </button>
</div>
<div class="m-noticeBar{% if error %} -error{% else %} text-white{% endif %}{% if contentheader %} -contentheader{% endif %}{% if utilitybar %} -utilityBar{% endif %}{% if overlapbox %} -overlapbox{% endif %} alert alert-dismissible fade show position-sticky" role="alert">
    <div class="m-noticeBar__content{% if error == true %} invalid-feedback{% endif %} d-flex flex-row justify-content-center align-items-center">
        <strong>{{text}}</strong>
        {% if button %}
        <span class="m-noticeBar__button ml-3">
            {% render '@button--border', {text:button_text, thin:true}, true %}
        </span>
        {% endif %}
    </div>
    <button type="button" class="btn m-noticeBar__close position-absolute" data-dismiss="alert" aria-label="Close">
        <i class="icon-close"></i>
    </button>
</div>
{
  "text": "Geef je persoonlijke voorkeuren voor jouw nieuwbouwwoning door voor 12 april",
  "error": false,
  "contentheader": true,
  "utilitybar": false,
  "button": true,
  "overlapbox": false,
  "button_text": "Naar Mijn Keuzelijst"
}

No notes defined.