Skip to main content

Patterns

Announcements

There is no specific style definition for the Announcements Object. They are a combination of the Layout Utilities, Divider Element, and Card Components.

<div class="py-4">
  <h2 class="type-h5 divider m-0">Announcements</h2>
  <div class="screen-tablet:layout--columns">
    <article class="c-card px-0 screen-tablet:px-2 screen-tablet:py-3" data-sketch-symbol-instance="components/card/card-flush">
      <div class="c-card__body">
        <h3 class="c-card__title mb-3">Apply for Pre-K for All</h3>
        <div class="c-card__summary"><a href="#">New York City families with a child born in 2014 can apply to Pre-K from February 5 - March 30, 2018.</a></div>
      </div>
    </article>
    <article class="c-card px-0 screen-tablet:px-2 screen-tablet:py-3" data-sketch-symbol-instance="components/card/card-flush">
      <div class="c-card__body">
        <h3 class="c-card__title mb-3">Apply for Pre-K for All</h3>
        <div class="c-card__summary"><a href="#">New York City families with a child born in 2014 can apply to Pre-K from February 5 - March 30, 2018.</a></div>
      </div>
    </article>
    <article class="c-card px-0 screen-tablet:px-2 screen-tablet:py-3" data-sketch-symbol-instance="components/card/card-flush">
      <div class="c-card__body">
        <h3 class="c-card__title mb-3">Apply for Pre-K for All</h3>
        <div class="c-card__summary"><a href="#">New York City families with a child born in 2014 can apply to Pre-K from February 5 - March 30, 2018.</a></div>
      </div>
    </article>
    <article class="c-card px-0 screen-tablet:px-2 screen-tablet:py-3" data-sketch-symbol-instance="components/card/card-flush">
      <div class="c-card__body">
        <h3 class="c-card__title mb-3">Apply for Pre-K for All</h3>
        <div class="c-card__summary"><a href="#">New York City families with a child born in 2014 can apply to Pre-K from February 5 - March 30, 2018.</a></div>
      </div>
    </article>
  </div>
</div>