Person cards

Use 'Person Cards' to neatly represent a 'person' with an image, links and description.


Example

John Doe

Senior Magic.CSS Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar. Nullam mollis iaculis magna eu convallis. Vestibulum finibus lorem eu vulputate varius. Morbi semper, mauris nec interdum tempor, leo tortor eleifend erat, at facilisis diam nulla ac lorem. Nullam nulla sapien, consequat ut lectus vitae, luctus dapibus justo. Pellentesque suscipit tempor ante, quis ornare augue auctor in. Vestibulum non commodo elit, cursus pellentesque justo. Nunc et quam vel nunc porta sagittis.

Adding Person Cards

Person cards are an interesting and very responsive way of representing a person (e.g. on a 'meet the team' page). They support images, links, and different types of text. Try resizing the page to see how they respond.

Person cards, due to the variety of content they can hold, require slightly more syntax than the average Magic component. Don't worry! It all makes sense:

<div class="person default">
  <img class="image" src="http://via.placeholder.com/350x300">
  <div class="identifier">
    <p class="name">John Doe</p>
    <p class="role">Senior Magic.CSS Developer</p>
  </div>
  <p class="links"><a href="#">Twitter</a> | <a href="#">Facebook</a></p>
  <div class="content">
    <p class="description">Lorem ipsum dolor sit amet, ...</p>
  </div>
</div>

Changing colours

To change the colour, replace the 'default' with any Magic Colour in the class="person default". This includes gradients and darkens/lightens.

Stacking person cards

An average scenario where Person Cards could be used is on a 'Meet the Team' page. In this case, it's handy to neatly pile person cards. This can be done with the following syntax:

John Doe

Senior Magic.CSS Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar.

John Doe

Senior Magic.CSS Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar.

John Doe

Senior Magic.CSS Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar.

<div class="person-group">
  <div class="person red">
    <img class="image" src="http://via.placeholder.com/350x300">
    <div class="identifier">
      <p class="name">John Doe</p>
      <p class="role">Senior Magic.CSS Developer</p>
    </div>
    <p class="links"><a href="#">Twitter</a> | <a href="#">Facebook</a></p>
    <div class="content">
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar.</p>
    </div>
  </div>
  <div class="person green">
    <img class="image" src="http://via.placeholder.com/350x300">
    <div class="identifier">
      <p class="name">John Doe</p>
      <p class="role">Senior Magic.CSS Developer</p>
    </div>
    <p class="links"><a href="#">Twitter</a> | <a href="#">Facebook</a></p>
    <div class="content">
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar.</p>
    </div>
  </div>
  <div class="person blue">
    <img class="image" src="http://via.placeholder.com/350x300">
    <div class="identifier">
      <p class="name">John Doe</p>
      <p class="role">Senior Magic.CSS Developer</p>
    </div>
    <p class="links"><a href="#">Twitter</a> | <a href="#">Facebook</a></p>
    <div class="content">
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar.</p>
    </div>
  </div>
</div>

John Doe

Senior Magic.CSS Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet metus et varius aliquet. Donec sed arcu congue, sodales urna ornare, sagittis urna. Donec eu pretium dolor. Nam gravida semper enim id pulvinar.

Person Cards in columns

As this example demonstrates, Person Cards do not work in columns. They must be added as full-width elements in a col12 or just in a container.

Circular images

Magic has a simple class to make any image circular. This works across all components (not just Person Cards), but is especially useful in this case. To make any image circular, simply add the class img-circular:

Normal

Circular

Using this class will apply a 50% border-radius property to your image. This means that if your image does not have a square aspect ratio, the rounded image will be an oval:

For more information on images in Magic, see the Image page.

Responsive Person Cards

Person Cards have 'special responsiveness' by default - you don't need to change anything. It's made to work in most scenarios. Here's a screenshot to give you an idea of what Person Cards morph into on 425px and below:

Try resizing the browser window to see what they turn into...