extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/alerts/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Notifications'},
      'Alerts'
    ]
  )

block view
  +docs-components('https://coreui.io/docs/components/alerts/')
  .row
    .col-lg-6
      .card.mb-4
        .card-header
          strong Alerts
        .card-body
          p.text-body-secondary.small
            | Bootstrap alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the 
            strong required
            |  contextual classes (e.g.,
            code .alert-success
            | ).
          +example('https://coreui.io/docs/components/alerts/#examples')
            .alert.alert-primary(role='alert')
              | This is a primary alert—check it out!
            .alert.alert-secondary(role='alert')
              | This is a secondary alert—check it out!
            .alert.alert-success(role='alert')
              | This is a success alert—check it out!
            .alert.alert-danger(role='alert')
              | This is a danger alert—check it out!
            .alert.alert-warning(role='alert')
              | This is a warning alert—check it out!
            .alert.alert-info(role='alert')
              | This is a info alert—check it out!
            .alert.alert-light(role='alert')
              | This is a light alert—check it out!
            .alert.alert-dark(role='alert')
              | This is a dark alert—check it out!
    .col-lg-6
      .card.mb-4
        .card-header
          strong Alerts
          span.small.ms-1 Link color
        .card-body
          p.text-body-secondary.small
            | Use the 
            code .alert-link
            |  utility class to immediately give matching colored links inside any alert.
          +example('https://coreui.io/docs/components/alerts/#link-color')
            .alert.alert-primary(role='alert')
              | This is a primary alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-secondary(role='alert')
              | This is a secondary alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-success(role='alert')
              | This is a success alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-danger(role='alert')
              | This is a danger alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-warning(role='alert')
              | This is a warning alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-info(role='alert')
              | This is a info alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-light(role='alert')
              | This is a light alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-dark(role='alert')
              | This is a dark alert with 
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
    // /.col
  // /.row
  .row
    .col-lg-6
      .card.mb-4
        .card-header
          strong Alerts
          span.small.ms-1 Additional content
        .card-body
          p.text-body-secondary.small
            | Alert can also incorporate supplementary HTML elements like heading, paragraph, and divider.
          +example('https://coreui.io/docs/components/alerts/#additional-content')
            .alert.alert-success(role='alert')
              h4.alert-heading Well done!
              p
                | Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
              hr
              p.mb-0
                | Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
    // /.col
    .col-lg-6
      .card.mb-4
        .card-header
          strong Alerts
          span.small.ms-1 Dismissing
        .card-body
          p.text-body-secondary.small Using the JavaScript plugin, it’s possible to remove any alert.
          +example('https://coreui.io/docs/components/alerts/#dismissing')
            .alert.alert-warning.alert-dismissible.fade.show(role='alert')
              .fw-semibold Holy guacamole!
              |  You should check in on some of those fields below.
              button.btn-close(type='button', data-coreui-dismiss='alert', aria-label='Close')
  // /.row