<!-- Basic -->
<h2 class="mb-0">Card</h2>
<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">
<h1 class="basic-card__title"><span>How do parents embrace technology for kids, but prevent it from ruling the household?</span></h1>
<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">
<h1 class="basic-card__title"><span>How do parents embrace technology for kids, but prevent it from ruling the household?</span></h1>
<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>
<!-- Event -->
<h2 class="mt-24 mb-0">Event Card</h2>
<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">
<h1 class="event-card__title"><span>How do parents embrace technology for kids, but prevent it from ruling the household?</span></h1>
</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"><object class="event-card-icon__time" tabindex="-1" data="/icons/denotive/time--grey60.svg" type="image/svg+xml"></object>1 p.m. PDT | 4 p.m. EDT</div>
<div class="event-card-info__location"><object class="event-card-icon__location" tabindex="-1" data="/icons/denotive/location--grey60.svg" type="image/svg+xml"></object>Moore Hall 100</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>
<!-- Featured Story -->
<h2 class="mt-24">Featured Story</h2>
<section class="story">
<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>
</section>
<!-- 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>
<!-- Info -->
<h2 class="mt-24">Info Card</h2>
<article class="info-card">
<div class="info-card__wrapper">
<h3 class="info-card__title">How do parents embrace technology for kids, but prevent it from ruling the household?</h3>
<p class="info-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="info-card__ctas">
<a href="#">CTA 1</a>
<a href="#">CTA 2</a>
</div>
</div>
</article>
<!-- Person -->
<h2 class="mt-24">Person Card</h2>
<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">
<h1 class="person-card__name">Gene Block</h1>
<h2 class="person-card__department">Title, Department</h2>
<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 class="person-card__contact">
<div class="person-card__contact-details">
<p class="person-card__contact-label">Email</p>
<a href="mailto:myemail@ucla.edu">myemail@ucla.edu</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Phone</p>
<a href="tel:+1-555-555-5555;123">(555) 555-5555 ext. 555</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Office</p>
<p>1111 Murphy Hall</p>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Mail</p>
<p>410 Charles E. Young Drive East,<br />Los Angeles, CA 90024</p>
</div>
</div>
<em class="person-card__photo-credit">Photo Credit: lorem ipsum dolore</em>
</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">
<h1 class="person-card__name">Gene Block</h1>
<h2 class="person-card__department">Title, Department</h2>
<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 class="person-card__contact">
<div class="person-card__contact-details">
<p class="person-card__contact-label">Email</p>
<a href="mailto:myemail@ucla.edu">myemail@ucla.edu</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Phone</p>
<a href="tel:+1-555-555-5555;123">(555) 555-5555 ext. 555</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Office</p>
<p>1111 Murphy Hall</p>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Mail</p>
<p>410 Charles E. Young Drive East,<br />Los Angeles, CA 90024</p>
</div>
</div>
<em class="person-card__photo-credit">Photo Credit: lorem ipsum dolore</em>
</div>
</article>
<!-- Basic -->
<h2 class="mb-0">Card</h2>
<article class="basic-card">
<img class="basic-card__image" src="{{path '/img/examples/event-card-example-1.jpg'}}" alt="Two children on their phones under the blankets">
<div class="basic-card__info-wrapper">
<h1 class="basic-card__title"><span>{{ title }}</span></h1>
<p class="basic-card__description">{{ description }}</p>
<div class="basic-card__buttons">
{{#each button}}
<button class="btn btn--tertiary">
{{ cta-title }}
</button>
{{/each}}
</div>
</div>
</article>
<article class="basic-card-grey">
<img class="basic-card__image" src="{{path '/img/examples/event-card-example-1.jpg'}}" alt="Two children on their phones under the blankets">
<div class="basic-card__info-wrapper">
<h1 class="basic-card__title"><span>{{ title }}</span></h1>
<p class="basic-card__description">{{ description }}</p>
<div class="basic-card__buttons">
{{#each button}}
<button class="btn btn--tertiary">
{{ cta-title }}
</button>
{{/each}}
</div>
</div>
</article>
<!-- Event -->
<h2 class="mt-24 mb-0">Event Card</h2>
<article class="event-card">
<a class="event-card__link" href="#">
<img class="event-card__image" src="{{path '/img/examples/event-card-example-1.jpg'}}" alt="Two children on their phones under the blankets">
<h1 class="event-card__title"><span>{{ title }}</span></h1>
</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"><object class="event-card-icon__time" tabindex="-1" data="/icons/denotive/time--grey60.svg" type="image/svg+xml"></object>1 p.m. PDT | 4 p.m. EDT</div>
<div class="event-card-info__location"><object class="event-card-icon__location" tabindex="-1" data="/icons/denotive/location--grey60.svg" type="image/svg+xml"></object>Moore Hall 100</div>
<div class="event-card-info__description">{{ description }}</div>
</div>
</article>
<!-- Featured Story -->
<h2 class="mt-24">Featured Story</h2>
<section class="story">
<div class="story__featured">
<article class="story__featured-card">
<a href="#" tabindex="-1">
<img class="story__featured-image" src="{{path '/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>
</section>
<!-- 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="{{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>
<!-- Info -->
<h2 class="mt-24">Info Card</h2>
<article class="info-card">
<div class="info-card__wrapper">
<h3 class="info-card__title">{{title}}</h3>
<p class="info-card__description">{{ description }}</p>
<div class="info-card__ctas">
{{#each button}}
<a href="{{link}}">{{cta-title}}</a>
{{/each}}
</div>
</div>
</article>
<!-- Person -->
<h2 class="mt-24">Person Card</h2>
<article class="person-card">
<img class="person-card__image" src="{{path '/img/examples/person-card-gene.jpg'}}" alt="Headshot of Gene Block">
<div class="person-card__info-wrapper">
<h1 class="person-card__name">Gene Block</h1>
<h2 class="person-card__department">Title, Department</h2>
<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 class="person-card__contact">
<div class="person-card__contact-details">
<p class="person-card__contact-label">Email</p>
<a href="mailto:myemail@ucla.edu">myemail@ucla.edu</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Phone</p>
<a href="tel:+1-555-555-5555;123">(555) 555-5555 ext. 555</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Office</p>
<p>1111 Murphy Hall</p>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Mail</p>
<p>410 Charles E. Young Drive East,<br />Los Angeles, CA 90024</p>
</div>
</div>
<em class="person-card__photo-credit">Photo Credit: lorem ipsum dolore</em>
</div>
</article>
<article class="person-card-grey">
<img class="person-card__image" src="{{path '/img/examples/person-card-gene.jpg'}}" alt="Headshot of Gene Block">
<div class="person-card__info-wrapper">
<h1 class="person-card__name">Gene Block</h1>
<h2 class="person-card__department">Title, Department</h2>
<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 class="person-card__contact">
<div class="person-card__contact-details">
<p class="person-card__contact-label">Email</p>
<a href="mailto:myemail@ucla.edu">myemail@ucla.edu</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Phone</p>
<a href="tel:+1-555-555-5555;123">(555) 555-5555 ext. 555</a>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Office</p>
<p>1111 Murphy Hall</p>
</div>
<div class="person-card__contact-details">
<p class="person-card__contact-label">Mail</p>
<p>410 Charles E. Young Drive East,<br />Los Angeles, CA 90024</p>
</div>
</div>
<em class="person-card__photo-credit">Photo Credit: lorem ipsum dolore</em>
</div>
</article>
/* Basic */
{
"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"
}
]
}
/* Event */
{
"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": 2
}
/* Featured Story */
{
"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": 3
}
/* Story */
{
"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
}
/* Info */
{
"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": 5
}
/* Person */
{
"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": 6
}
No notes defined.