<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>
<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>
{
  "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
}
  • Handle: @cards--person
  • Preview:
  • Filesystem Path: src/components/03-components/05-cards/06-cards--person.hbs

No notes defined.