CBP UI Library

Panel 

<!-- Default -->
<div class="panel ">
    <p>Increasing needs for land and resources have resulted in fragmentation and degradation of many habitats across the watershed while also challenging the health of many Bay watershed species. Conserving healthy habitats and restoring the connectivity and function of degraded habitats is essential to the long-term resilience and sustainability of the ecosystem and the region’s quality of life.</p>
</div>

<link media="all" rel="stylesheet" href="/panel/panel.css" />
<script src="/panel/panel.js"></script>


<!-- 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>


<!-- 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') }}
 
/* Default */
{
  "text": "<p>Increasing needs for land and resources have resulted in fragmentation and degradation of many habitats across the watershed while also challenging the health of many Bay watershed species. Conserving healthy habitats and restoring the connectivity and function of degraded habitats is essential to the long-term resilience and sustainability of the ecosystem and the region’s quality of life.</p>"
}


/* Success */
{
  "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"
}


/* Error */
{
  "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.