CBP UI Library

Panel: Error 

<div class="panel panel--error">
    <h2 class='h3'>Uh oh!</h3>
        <p>Sorry, but there was a problem with your submission. See errors below.</p>
</div>

<link media="all" rel="stylesheet" href="/panel/panel.css" />
<script src="/panel/panel.js"></script>
 
<div class="panel {{ classes }}">{{ text|raw }}</div>

{% import "_macros.twig" as h %}
{{ h.componentAssets('panel') }}
 
{
  "text": "<h2 class='h3'>Uh oh!</h3> <p>Sorry, but there was a problem with your submission. See errors below.</p>",
  "classes": "panel--error"
}
  • Content: 
    @mixin panel {
  padding: var(--panelPadding);
  border: 1px solid var(--neutral--dark);
  background-color: var(--panelBackgroundColor, var(--neutral--light));
}

.panel {
  @include panel();
}
.panel--success {
  --panelBackgroundColor: var(--success);
}
.panel--error {
  --panelBackgroundColor: var(--alertBg);
}
  • URL: /components/raw/panel/panel.scss
  • Filesystem Path: src/components/panel/panel.scss
  • Size: 317 Bytes

No notes defined.