CBP UI Library

Callout News 

<article class="mediaObject calloutNews">
    <div class="mediaObject__body calloutNews__body">
        <header class="mediaObject__header">
            <h2 class="mediaObject__title calloutNews__title">Title</h2>
        </header>
        <p>Description text goes here</p>
        <p><a href="#" class="pageLink">Learn more about the subject<span class="appendedIcon">&zwj;<i class="fas fa-angle-right"></i></span></a></p>
    </div>
    <img class="mediaObject__img calloutNews__img" src="https://placehold.co/230x106" alt="A placeholder image" />
</article>

<link media="all" rel="stylesheet" href="/callout-news/callout-news.css" />
<script src="/callout-news/callout-news.js"></script>
 
<article class="mediaObject calloutNews">
  <div class="mediaObject__body calloutNews__body">
    <header class="mediaObject__header">
      <h2 class="mediaObject__title calloutNews__title">Title</h2>
    </header>
    <p>Description text goes here</p>
    <p><a href="#" class="pageLink">{% render "@icon--appended" %}</a></p>
  </div>
    <img class="mediaObject__img calloutNews__img" src="https://placehold.co/230x106" alt="A placeholder image" />
</article>

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

.calloutNews {
  border-top: 1px var(--neutral--dark) solid;
  border-bottom: 1px var(--neutral--dark) solid;
  padding: 1em var(--gutterX);
  gap: 0.7em var(--gutterX);
  align-items: center;

  p {
    &:last-of-type {
      margin-block-end: 0;
    }
  }
}
.calloutNews__body {
  flex: 63%;
}
.calloutNews__title {
  font-size: var(--step-1);
}
.calloutNews__img {
  --mediaObjectImgMaxWidth: 150px;
  --mediaObjectImgMinWidth: 150px;
}
  • URL: /components/raw/callout-news/callout-news.scss
  • Filesystem Path: src/components/callout-news/callout-news.scss
  • Size: 504 Bytes

No notes defined.