Error Note

Pattern for displaying errors within a layout or as part of another component


    
      <div class="lmp-error">
    <i class="lmp-icon icon-lg" aria-hidden="true">error</i>  
    Example error text. Including a <a href="#">link</a>.
  </div>
  
    
  

Error within a collapsible card

    
       <div class="lmp-card-collapse">
    <h3 id="exampleCardCardHeading" class="mb-0">
      <button class="card-trigger" type="button" data-toggle="collapse" data-target="#exampleCard" aria-expanded="true" aria-controls="exampleCard">
        <span class="card-label">Card Title</span>
      </button>
    </h3>
    <div id="exampleCard" class="card-collapse collapse show" aria-labelledby="exampleCardCardHeading">
  <div class="lmp-card-content p-4">
    <div class="lmp-error">
      <i class="lmp-icon icon-lg" aria-hidden="true">error</i>  
      Something went wrong loading this information. Please <a href="#">reload</a> or try again later.
    </div>
  </div>
    </div>
   </div>
  
    
  

Error within an Overview card

    
      <div class="atp-card-overview">
    <div class="card-title">
      <h3 class="h4">Card Title</h3>
    </div>
    <div class="row px-3">
      <div class="col py-4">
        <div class="lmp-error">
          <i class="lmp-icon icon-lg" aria-hidden="true">error</i>  
          Something went wrong loading this information. Please <a href="#">reload</a> or try again later.
        </div>
      </div>
    </div>
  </div>