UCLA Web Components

Cards: 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>
 
<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>
 
{
  "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
}

No notes defined.