<h1>Basic Card Variants</h1>
<article class="basic-card">
<img class="basic-card__image" src="/img/examples/event-card-example-1.jpg" alt="Two children on their phones under the blankets">
<div class="basic-card__info-wrapper">
<h3 class="basic-card__title"><span>How do parents embrace technology for kids, but prevent it from ruling the household?</span></h3>
<p class="basic-card__description">With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…</p>
<div class="basic-card__buttons">
<button class="btn btn--tertiary">
CTA 1
</button>
<button class="btn btn--tertiary">
CTA 2
</button>
</div>
</div>
</article>
<article class="basic-card-grey">
<img class="basic-card__image" src="/img/examples/event-card-example-1.jpg" alt="Two children on their phones under the blankets">
<div class="basic-card__info-wrapper">
<h3 class="basic-card__title"><span>How do parents embrace technology for kids, but prevent it from ruling the household?</span></h3>
<p class="basic-card__description">With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…</p>
<div class="basic-card__buttons">
<button class="btn btn--tertiary">
CTA 1
</button>
<button class="btn btn--tertiary">
CTA 2
</button>
</div>
</div>
</article>
<h1>Event Card</h1>
<article class="event-card">
<a class="event-card__link" href="#">
<img class="event-card__image" src="/img/examples/event-card-example-1.jpg" alt="Two children on their phones under the blankets">
<h3 class="event-card__title"><span>How do parents embrace technology for kids, but prevent it from ruling the household?</span></h3>
</a>
<div class="event-card-info">
<div class="event-card-info__date">
<span class="small-block">
<span class="event-card-info__day">Wed</span>
<span class="event-card-info__month">Aug</span>
</span>
<span class="event-card-info__number">19</span>
</div>
<div class="event-card-info__time"><span class="event-card-icon__time"></span>1 p.m. PDT | 4 p.m. EDT</div>
<div class="event-card-info__location"><span class="event-card-icon__play"></span>Recording Available</div>
<div class="event-card-info__description">With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…</div>
</div>
</article>
<section class="story">
<h1>Featured Story</h1><br>
<div class="story__featured">
<article class="story__featured-card">
<a href="#" tabindex="-1">
<img class="story__featured-image" src="/img/examples/featured-story-bill-and-john.jpg" alt="Bill Walton with a drawing of Coach John Wooden.">
</a>
<div class="story__featured-content">
<h3 class="story__featured-title"><a class="link" href="#">Featured Story</a></h3>
<p class="story__featured-blurb">Hall of Famer Bill Walton '74 recently talked about his approach to life, what he's learned and his love for his alma mater.</p>
<p class="story__featured-source">Source: <a class="link" href="#">UCLA Magazine</a></p>
</div>
</article>
</div>
<h2>Secondary Story Variants</h2><br>
<div class="story__secondary">
<article class="story__secondary-card">
<a href="#">
<div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies and co-lead of the Million Dollar Hoods Project." /></div>
<h3 class="story__secondary-title">
<span class="story__secondary-title-text">Secondary Story</span>
</h3>
</a>
<div class="story__secondary-content">
<p class="story__secondary-blurb">As UCLA’s four ethnic studies centers celebrate their 50th anniversary, their mission — to use advanced research to bring about social justice — takes on added urgency.</p>
<p class="story__secondary-source">Source: <a href="#" class="link">UCLA Magazine</a></p>
</div>
</article>
<article class="story__secondary-card-grey">
<a href="#">
<div class="story__secondary-image-wrapper"><img class="story__secondary-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies and co-lead of the Million Dollar Hoods Project." /></div>
<h3 class="story__secondary-title">
<span class="story__secondary-title-text">Society, Struggle, Scholarship</span>
</h3>
</a>
<div class="story__secondary-content">
<p class="story__secondary-blurb">As UCLA’s four ethnic studies centers celebrate their 50th anniversary, their mission — to use advanced research to bring about social justice — takes on added urgency.</p>
<p class="story__secondary-source">Source: <a href="#" class="link">UCLA Magazine</a></p>
</div>
</article>
</div>
</section>
<h1>Person Card Variants</h1><br>
<article class="person-card">
<img class="person-card__image" src="/img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
<div class="person-card__info-wrapper">
<h3 class="person-card__name"><span>Gene Block</span></h3>
<h4 class="person-card__department"><span>Title, Department</span></h4>
<p class="person-card__description">With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…</p>
</div>
</article>
<article class="person-card-grey">
<img class="person-card__image" src="/img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
<div class="person-card__info-wrapper">
<h3 class="person-card__name"><span>Gene Block</span></h3>
<h4 class="person-card__department"><span>Title, Department</span></h4>
<p class="person-card__description">With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…</p>
</div>
</article>