HomeComponents

Notification

Default

Alert Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet asperiores asds totam, veritatis.

17 Aug 2018 16:23 BST
<!-- notification (default) -->
<div class="ui-notification">

  <div class="ui-notification__left">
    <div class="ui-notification__title">...</div>
    <p class="ui-paragraph ui-paragraph--lg ui-paragraph--medium">...</p>
  </div>

  <div class="ui-notification__right">
    <div class="ui-notification__meta">...</div>
    <div class="ui-notification__cta">
      <button class="ui-btn ui-btn--small ui-btn--pill">...</button>
    </div>
  </div>

</div>

Not read (flag left border)

Alert Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet asperiores asds totam, veritatis.

17 Aug 2018 16:23 BST
Link label
<!-- notification (default) -->
<div class="ui-notification ui-notification--flag">

  <div class="ui-notification__left">
    <div class="ui-notification__title">...</div>
    <p class="ui-paragraph ui-paragraph--lg.ui-paragraph--medium">...</p>
  </div>

  <div class="ui-notification__right">
    <div class="ui-notification__meta">...</div>
    <div class="ui-notification__cta">

      <!-- the CTA can also be a link with href - styled as a button -->
      <a href="#alert" class="ui-btn ui-btn--small ui-btn--pill">...</a>
    </div>
  </div>
</div>

Urgent

Urgent
Alert Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet asperiores assumenda eaque optio reiciendis, rerum. Accusamus blandi optio, quas sapiente totam, veritatis.

17 Aug 2018 16:23 BST
Link label
<!-- notification (urgent) -->
<div class="ui-notification ui-notification--urgent">

  <div class="ui-notification__left">
    <div class="ui-notification__prefix">...</div>
    <div class="ui-notification__title">...</div>
    <p class="ui-paragraph ui-paragraph--lg ui-paragraph--medium">...</p>
  </div>

  <div class="ui-notification__right">
    <div class="ui-notification__meta">...</div>
    <div class="ui-notification__cta">
      <a href="#urgent" class="ui-btn ui-btn--red ui-btn--small ui-btn--pill">...</a>
    </div>
  </div>
</div>
Refinitiv © 2020