rahmanda/ayu

section.section(id= "callout", data-module="notification")
  header.section__header
    h2.u-text--large.u-mg-bottom--medium Callout
    p Callout is a colorful box that can be used as, not limited to note on a post or flash notification
  .section__content.u-mg-bottom--medium
    p 1. Basic Callout
    .section__items.u-mg-bottom--medium
      .row
        .gr-4
          .callout.callout--block This is basic callout with boring color
        .gr-4
          .callout.callout--block.callout--large Large basic callout
        .gr-4
          .callout.callout--block.callout--x-large Extra Large basic callout
    p 2. Green Callout
    .section__items.u-mg-bottom--medium
      .row
        .gr-4
          .callout.callout--block.callout--green Now this is starting to be interesting
        .gr-4
          .callout.callout--block.callout--green.callout--large Large Green Callout
        .gr-4
          .callout.callout--block.callout--green.callout--x-large Extra Large basic callout
    p 3. Red Callout
    .section__items.u-mg-bottom--medium
      .row
        .gr-4
          .callout.callout--block.callout--red Yeay, another color variant!
        .gr-4
          .callout.callout--block.callout--red.callout--large Yeay, another color variant!
        .gr-4
          .callout.callout--block.callout--red.callout--x-large Yeay, another color variant!
    p 4. Yellow Callout
    .section__items.u-mg-bottom--medium
      .row
        .gr-4
          .callout.callout--block.callout--yellow You have pretty much gotten the idea, right?
        .gr-4
          .callout.callout--block.callout--yellow.callout--large You have pretty much gotten the idea, right?
        .gr-4
          .callout.callout--block.callout--yellow.callout--x-large You have pretty much gotten the idea, right?
    p 5. Callout with Icon - Using Flag Component
    .section__items.u-mg-bottom--medium
      .row
        .gr-4
          .callout.callout--block.callout--yellow
            .flag
              .flag__head
                i.i-android-bulb
              .flag__body.u-pd-left--small You have pretty much gotten the idea, right?
        .gr-4
          .callout.callout--block.callout--yellow.callout--large
            .flag
              .flag__head
                i.i-android-bulb
              .flag__body.u-pd-left--small You have pretty much gotten the idea, right?
        .gr-4
          .callout.callout--block.callout--yellow.callout--x-large
            .flag.flag--top
              .flag__head
                i.i-android-bulb.u-text--x-large
              .flag__body.u-pd-left--medium.
                Facer impetus no sed, ne pro zril bonorum. An meliore intellegat philosophia per, et etiam assum reformidans vim. Harum numquam pri ei, vix in feugiat insolens vulputate. Modus omnium forensibus et pri, te mei natum molestiae.
    p 6. Success notification
    button.btn.btn--common(data-type="trigger", data-target='success-notif') Click to Show Notification
    .section__items
      .callout.callout--green.callout--notification#success-notif
        .flag
          .flag__body This is just notif
          .flag__head.u-align-right
            i.i-close
  .section__content.u-mg-bottom--medium
    p 7. Error notification
    button.btn.btn--common(data-type="trigger", data-target='error-notif') Click to Show Notification
    .section__items
      .callout.callout--red.callout--notification.callout--error#error-notif
        .flag
          .flag__body This is just notif
          .flag__head.u-align-right
            i.i-close