Alert

There are no notes for this item.

<section id="MsuAlert" aria-label="Homepage Alert">
    <style scoped="">
        #MsuAlertOuter {
            width: 100%;
            background-color: #303031;
            color: #D9DA55;
        }

        #MsuAlertInner {
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 10px 40px 50px;
            position: relative;
        }

        #MsuAlertInner .Icon {
            height: 31px;
            left: 10px;
            position: absolute;
            top: 40px;
            width: 31px;
        }

        #MsuAlertInner a {
            text-decoration: underline;
            color: #D9DA55;
        }

        #MsuAlertInner .Alert {
            margin-bottom: 20px;
        }

        #MsuAlertInner .Alert a {
            font-weight: bold;
        }
    </style>
    <div id="MsuAlertOuter">
        <div id="MsuAlertInner">
            <div class="Icon"><img alt="Attention" src="../../images/msualert.png" width="31" height="31"></div>
            <div class="Alert"><a href="#">Lorem ipsum dolor sit amet consectetur</a>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam perferendis repellat vero in non ipsum recusandae quos fugiat doloribus quasi.</p>
            </div>
            <p><a href="#">More details</a></p>
        </div>
    </div>
</section>
<section id="MsuAlert" aria-label="Homepage Alert">
  <style scoped="">
    #MsuAlertOuter {
      width: 100%;
      background-color: #303031;
      color: #D9DA55;
    }

    #MsuAlertInner {
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 10px 40px 50px;
      position: relative;
    }

    #MsuAlertInner .Icon {
      height: 31px;
      left: 10px;
      position: absolute;
      top: 40px;
      width: 31px;
    }

    #MsuAlertInner a {
      text-decoration: underline;
      color: #D9DA55;
    }

    #MsuAlertInner .Alert {
      margin-bottom: 20px;
    }

    #MsuAlertInner .Alert a {
      font-weight: bold;
    }
  </style>
  <div id="MsuAlertOuter">
    <div id="MsuAlertInner">
      <div class="Icon"><img alt="Attention" src="{{path '/images/msualert.png'}}" width="31" height="31"></div>
      <div class="Alert"><a href="{{url}}">{{headline}}</a>
        <p>{{description}}</p>
      </div>
      <p><a href="{{url}}">More details</a></p>
    </div>
  </div>
</section>
{
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "url": "#",
  "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam perferendis repellat vero in non ipsum recusandae quos fugiat doloribus quasi."
}