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>
 
<div class="panel {{ classes }}">{{ text|raw }}</div>

{% import "_macros.twig" as h %}
{{ h.componentAssets('panel') }}
 
{
  "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>"
}
  • 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.