include ./helpers

- var avatar = "https://storage.googleapis.com/media.table.co/c33369b2-db56-40d2-a38b-1ad5ee89cc83_RC_140x140.jpeg?GoogleAccessId=560341208563-u1ti014a2f6lfp2id4v2h976d2ci3ce1@developer.gserviceaccount.com&Expires=17203901351&Signature=Ut6yda4xLF5kXmnmtfCNKrrqGM1mw5tDD8aCt0NfvwIkiwuNElYBu2OArdxe5nfw%2Fp0dRcWkbgmjglKIU5yB78c%2BvwgfS171GAxPO%2FvnZ%2FRdGhvui2KiCPKovugsQ6TV7P5um%2BG7TK0CJlw5pf35yQjXpX3lgxBHpkyk9RjqhPuMnMu0oIHbYsI1QjKCQH83aZrOZIAEGYXivOsbFcuASN1aegpsP%2B7D6t3liLhDb7VD36gEwqGZSO18p60d5IdAx3kWVSo246DOp5kphPoO0NAiww%2BvcE7SjS4A8RfUZDVOF9B3E7vFmpSgfgVhFoo5Tjn%2BRJX%2BKDo7Nzcy%2FeG%2BwA%3D%3D"

h1.example__header Notifications

//
  .row
    .column--quarter
      span.header--small Notifications
      p.content--small.
        Standard notification is just an extension of message. There are just two differences. There is not name element and the content is vertically centered.
    .column--three-quarter
      label.label Code Example
      +codeExample("html").
        <div class="notification">
          <img class="notification__avatar" src="..."/>
          <div class="notification__content">
            This is my notification's content. It is enough content to wrap around to the next line so we know where the boundaries between elements are.
          </div>
          <div class="notification__extra">
            <div class="notification__time">00:00</div>
            <div class="notification__options">
              <span class="icon-accept"/>
              <span class="icon-close"/>
            </div>
          </div>
        </div>
        <br />
        <div class="notification">
          <img class="notification__avatar" src="..."/>
          <div class="notification__content">
            This is my notification's content. It is enough content to wrap around to the next line so we know where the boundaries between elements are.
          </div>
          <div class="notification__extra">
            <div class="notification__time">00:00</div>
            <div class="notification__options">
              <span class="icon-accept"/>
              <span class="icon-close"/>
            </div>
          </div>
        </div>

      label.label Result
      .notification
        img.notification__avatar(src=avatar)
        .notification__content This is my notification's content.
        .notification__extra
          .notification__time 00:00
          .notification__options
            span.icon-accept
            span.icon-close
      br
      .notification
        img.notification__avatar(src=avatar)
        .notification__content This is my notification's content.
        .notification__extra
          .notification__time 00:00