Skip to main content

User and team cards

User and team cards are designed to add to your about page, blog, or post. They are simple and beautiful.

User cards​

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

DeleteEdit
<!-- without footer -->
<div class="card card-user">
  <div class="card-head">
    <div class="user-profile">
      <img src="..." alt="..." />
    </div>
    <div class="user-info">
      <h5>...</h5>
      <p>...</p>
    </div>
  </div>
  <div class="card-content">
    <p>...</p>
  </div>
</div>

<!-- with footer -->
<div class="card card-user">
  <div class="card-head">
    <div class="user-profile">
      <img src="..." alt="..." />
    </div>
    <div class="user-info">
      <h5>...</h5>
      <p>...</p>
    </div>
  </div>
  <div class="card-content">
    <p>...</p>
  </div>
  <div class="card-footer">
    <a href="#!" class="button button-danger-outline is-small">...</a>
    <a href="#!" class="button button-primary is-small">...</a>
  </div>
</div>

Team cards​

Presentation card​

John SmithFront-end dev.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • @john_smith
  • John Smith
  • John Smith
<div class="card card-profile">
  <div class="card-head">
    <h5 class="card-name">
      ...
      <small>...</small>
    </h5>
  </div>
  <div class="card-content">
    ...
  </div>
</div>

Team card​

...
John Smith

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid animi asperiores at commodi debitis.

  • Front-end dev.
  • @john_smith
  • John Smith
  • John Smith
  • @john_smith203
<div class="card card-team">
  <div class="card-header">
    <div class="card-image">
      <div class="card-inner-image">
        <img src="..." alt="..." />
      </div>
      <figcaption>...</figcaption>
    </div>
  </div>
  <div class="card-content">
    ...
  </div>
</div>