CBP UI Library

Panel: Success 

<div class="panel panel--success">
    <h2 class='h3'>Thank you!</h3>
        <p>Your submission has been received. Please allow 3-5 business days for a response from one of our team members.</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'>Thank you!</h3> <p>Your submission has been received. Please allow 3-5 business days for a response from one of our team members.</p>",
  "classes": "panel--success"
}
  • 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.