CBP UI Library

Callout 

<article class="callout">
    <h1 class="callout__title">Partnership goals</h1>
    <p>As part of the <a href="#"><em>Chesapeake Bay Watershed Agreement</em></a>, our partners committed to the goal of creating or reestablishing 85,000 acres of wetlands and enhancing an additional 150,000 acres of degraded wetlands by 2025. Between 2010 and 2017, <a href="#">9,103 acres of wetlands</a> were established, rehabilitated or reestablished on agricultural lands. This marks an 11% achievement of the 83,000-acre goal.</p>
    <a href="#" class="pageLink--inverse">Read more<span class="appendedIcon">&zwj;<i class="fas fa-angle-right"></i></span></a>
</article>

<link media="all" rel="stylesheet" href="/callout/callout.css" />
<script src="/callout/callout.js"></script>
 
<article class="callout">
  <h1 class="callout__title">Partnership goals</h1>
  <p>As part of the <a href="#"><em>Chesapeake Bay Watershed Agreement</em></a>, our partners committed to the goal of creating or reestablishing 85,000 acres of wetlands and enhancing an additional 150,000 acres of degraded wetlands by 2025. Between 2010 and 2017, <a href="#">9,103 acres of wetlands</a> were established, rehabilitated or reestablished on agricultural lands. This marks an 11% achievement of the 83,000-acre goal.</p>
  <a href="#" class="pageLink--inverse">{% render "@icon--appended" with {text: "Read more"} %}</a>
</article>

{% import "_macros.twig" as h %}
{{ h.componentAssets('callout') }}
 
/* No context defined. */
  • Content: 
    @use "../_layout/mixins";

.callout {
  background-color: var(--blue--dark);
  color: var(--white);
  padding: 1.5em;

  a:not([class]) {
    @include mixins.plainLinkInverse();
  }
}
.callout__title {
  font-size: var(--step-4);
}
  • URL: /components/raw/callout/callout.scss
  • Filesystem Path: src/components/callout/callout.scss
  • Size: 232 Bytes

No notes defined.