UCLA Component Library

Cards: Story 

<article class="story__secondary-card has-background-white">
     <a class="story__secondary-card-link" href="#">
         <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
         <p class="story__secondary-card-date">September 02, 2021</p>
         <h3 class="story__secondary-card-title"><span>Society, Struggle, Scholarship</span></h3>
     </a>
     <div class="story__secondary-card-content">
         <p class="story__secondary-card-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-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
     </div>
 </article>

 <!-- Add class `has-background-light-grey` to the parent level to giv the card a grey background. -->
 <article class="story__secondary-card has-background-lightest-grey-2">
     <a class="story__secondary-card-link" href="#">
         <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
         <p class="story__secondary-card-date">September 02, 2021</p>
         <h3 class="story__secondary-card-title"><span>Society, Struggle, Scholarship</span></h3>
     </a>
     <div class="story__secondary-card-content">
         <p class="story__secondary-card-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-card-source">Source: <a href="#" class="story__secondary-card-link source"><span>UCLA Magazine</span></a></p>
     </div>
 </article>