UCLA Web Components

Cards: Story 

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

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

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

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

 <article class="story__secondary-card has-background-white">
  <a class="story__secondary-card-image-link" href="#">
    <img class="story__secondary-card-image" src="{{path '/img/examples/story-danielle.jpg'}}" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
  </a>
  <div class="story__secondary-card-content">
    <p class="story__secondary-card-date">September 02, 2021</p>
    <h3 class="story__secondary-card-title"><a class="story__secondary-card-link" href="#">Society, Struggle, Scholarship</a></h3>
    <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 give the card a grey background. -->
<article class="story__secondary-card has-background-lightest-grey-2">
  <a class="story__secondary-card-image-link" href="#">
    <img class="story__secondary-card-image" src="{{path '/img/examples/story-danielle.jpg'}}" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
  </a>
  <div class="story__secondary-card-content">
    <p class="story__secondary-card-date">September 02, 2021</p>
    <h3 class="story__secondary-card-title"><a class="story__secondary-card-link" href="#">Society, Struggle, Scholarship</a></h3>
    <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>
 
{
  "title": "How do parents embrace technology for kids, but prevent it from ruling the household?",
  "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…",
  "button": [
    {
      "link": "#",
      "cta-title": "CTA 1"
    },
    {
      "link": "#",
      "cta-title": "CTA 2"
    }
  ],
  "order": 4
}

No notes defined.