<p>This is not really a component but rather a style guide to make your own card components using the right typography, colors, alignments. Feel free to use it as a skeleton!</p>

<div class="gr grsxl">
  <div class="gu gu-1of2 gu-m-1of1">
    <div class="rc-card rc-card-l">
      <div class="rc-card-header">
      <h2 class="name">
        <a href="">Firstname Lastname</a>
        <i class="vicon vicon-star"></i>
      </h2>
      </div>
      <div class="rc-card-content rc rcss">
      <a href="" class="avatar img-left">
        <img src="img/avatars/avatar-m-107x145.png">
      </a>
      <div class="bd">
        <h3 class="job">Job, Company</h3>
        <h4 class="where">City, Country |
        Industry
        </h4>
        <dl class="previously">
        <dt>Since 2011:</dt>
        <dd>Job, Company</dd>
        <dt>From 2008 to 2011:</dt>
        <dd>Job, Company</dd>
        </dl>
      </div>
      </div>
      <div class="rc-card-footer">
      <span class="fl mtxs">Other information</span>
      <a class="btn btn-primary fr">Button</a>
      </div>
    </div>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<div class="rc-card rc-card-l">
  <div class="rc-card-header">
  <h2 class="name">
    <a href="">Firstname Lastname</a>
    <i class="vicon vicon-star"></i>
  </h2>
  </div>
  <div class="rc-card-content rc rcss">
  <a href="" class="avatar img-left">
    <img src="…/avatar-m-107x145.png">
  </a>
  <div class="bd">
    <h3 class="job">Job, Company</h3>
    <h4 class="where">City, Country |
    Industry
    </h4>
    <dl class="previously">
    <dt>Since 2011:</dt>
    <dd>Job, Company</dd>
    <dt>From 2008 to 2011:</dt>
    <dd>Job, Company</dd>
    </dl>
  </div>
  </div>
  <div class="rc-card-footer">
  <span class="fl mtxs">Other information</span>
  <a class="btn btn-primary fr">Button</a>
  </div>
</div>
```
{{/markdown}}
{{> copy-code}}
</div>

  </div>

  <div class="gu gu-last">
    <div class="rc-card rc-card-m mbm">
      <div class="rc-card-header rc rcss">
      <a href="" class="avatar img-left">
        <img src="img/avatars/avatar-m-60x60.png">
      </a>
      <div class="bd">
        <h2 class="name"><a href="">Firstname Lastname</a></h2>
        <h3 class="job">Job, Company</h3>
      </div>
      </div>
      <div class="rc-card-content">
      <h4 class="where">City, Country | Industry</h4>
      <dl class="previously">
        <dt>Since 2011:</dt>
        <dd>Job, Company</dd>
        <dt>From 2008 to 2011:</dt>
        <dd>Job, Company</dd>
      </dl>
      </div>
    </div>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<div class="rc-card rc-card-m">
  <div class="rc-card-header rc rcss">
  <a href="" class="avatar img-left">
    <img src="…/avatar-m-60x60.png">
  </a>
  <div class="bd">
    <h2 class="name">
    <a href="">Firstname Lastname</a>
    </h2>
    <h3 class="job">Job, Company</h3>
  </div>
  </div>
  <div class="rc-card-content">
  <h4 class="where">City, Country |
    Industry
  </h4>
  <dl class="previously">
    <dt>Since 2011:</dt>
    <dd>Job, Company</dd>
    <dt>From 2008 to 2011:</dt>
    <dd>Job, Company</dd>
  </dl>
  </div>
</div>
```
{{/markdown}}
{{> copy-code}}
</div>

  </div>

</div>
