Product Name

User Cards

ACCOUNT
Manage permissions
Remove from organization
Gandalf The Gray balrogslayer@mordor.com
Last login: January 11, 2019
OWNER
Manage permissions
Remove from organization
Gandalf The Gray balrogslayer@mordor.com
Last login: January 11, 2019
FULL ACCESS
Manage permissions
Remove from organization
Gandalf The Gray
Last login: January 11, 2019
FULL ACCESS
Manage permissions
Remove from organization
Gandalf The Gray balrogslayer@mordor.com
Last login: January 11, 2019
Show Code 
<div class="ui grid">
  <div class="eight wide tablet four wide computer column">
    <div class="ui fluid user card">
      <div class="options">
        <div class="ui purple horizontal label">Permission level</div>
        <div class="ui dropdown">
          <i class="ellipsis vertical icon"></i>
          <div class="menu">
            <div class="item bold text">Manage permissions</div>
            <div class="item text bold red">Remove from organization</div>
          </div>
        </div>
      </div>
      <div class="image">
        <img src="image.png">
      </div>
      <div class="content">
        <a href="#" class="header">Name Surename</a>
        <span>example@email.com</span>
      </div>
      <div class="extra content">
        <span>Last login: January 11, 2019</span>
      </div>
    </div>
  </div>
  <div class="eight wide tablet four wide computer column">
    ...
  </div>
  <div class="eight wide tablet four wide computer column">
    ...
  </div>
  <div class="eight wide tablet four wide computer column">
    ...
  </div>
</div>

Simple Cards

Cards with Checkbox

Product Quantity Limit (Beta)

NO YES

Link cards

Collect Emails

Jenny is a student studying Media Management at the New School
Collect Emails

Jenny is a student studying Media Management at the New School
Collect Emails

Jenny is a student studying Media Management at the New School

Banner Cards

Small Button Cards

Activecampaign logo
Actionetics
Activecampaign logo
Activecampaign
Aweber
Constant Contact Api with a long title
Convertkit Api
Activecampaign logo
Actionetics
Activecampaign logo
Activecampaign
Aweber
Constant Contact Api
Convertkit Api
Constant Contact Api
Convertkit Api
Constant Contact Api
Convertkit Api

Large Button Cards

Media Cards

Actionetics
 
Edit Page Edit in classic editor
Actionetics
 
Edit Page Edit in classic editor
Actionetics
 
Edit Page Edit in classic editor
Actionetics
 
Edit Page Edit in classic editor
Actionetics
 
Edit Page Edit in classic editor
Actionetics
 
Edit Page Edit in classic editor

Template Cards

Select Template
Preview
 
Training / Webinar Order Form

Facebook Image - 1000 x 800

Select Template
Preview
 
When a title is too long it should trail off with an elipsis
Show Code 
  <div class="ui special template cards cf-cards">
    <div class="card">
      <div class="blurring dimmable image" style="background-image:url(https://www.fillmurray.com/300/250)">
        <div class="ui dimmer">
          <div class="content">
            <div class="center">
              <div class="ui primary button"><i class="ui plus icon"></i>Select Template</div>
              <div class="ui button"><i class="ui eye icon"></i>Preview</div>
            </div>
          </div>
        </div>
        &nbsp;
      </div>
      <div class="content">
        <span class="header center aligned">Training / Webinar Order Form</span>
        <p class="grey semi-bold small text">Facebook Image  - 1000 x 800</p>
      </div>
    </div>
      <div class="card">
      <div class="blurring dimmable image" style="background-image:url(https://www.fillmurray.com/300/200)">
        <div class="ui dimmer">
          <div class="content">
            <div class="center">
              <div class="ui primary button"><i class="ui plus icon"></i>Select Template</div>
              <div class="ui button"><i class="ui eye icon"></i>Preview</div>
            </div>
          </div>
        </div>
        &nbsp;
      </div>
      <div class="content">
        <span class="header center aligned">When a title is too long it should trail off with an elipsis</span>
      </div>
    </div>
  </div>
  <script>
    $(function(){
      $('.special.cards .card .dimmer').dimmer({
        on: 'hover'
      });
    });
  </script>

You can enable the entire card to be clickable:

This will prevent buttons within from actually being clickable and is not suited for a use case where multiple options are needed.
Select Template
 
Training / Webinar Order Form

Facebook Image - 1000 x 800
Select Template
 
When a title is too long it should trail off with an elipsis
Show Code 
<div class="ui special template cards cf-cards">
  <a href="//google.com/" target="_blank" class="card">
    <div class="blurring dimmable image" style="background-image:url(https://www.fillmurray.com/300/250)">
      <div class="ui dimmer">
        <div class="content">
          <div class="center">
            <div class="ui primary button"><i class="ui plus icon"></i>Select Template</div>
          </div>
        </div>
      </div>
      &nbsp;
    </div>
    <div class="content">
      <span class="header center aligned">Training / Webinar Order Form</span>
      <p class="grey semi-bold small text">Facebook Image  - 1000 x 800</p>
    </div>
  </a>
  <a href="//google.com/" target="_blank" class="card">
    <div class="blurring dimmable image" style="background-image:url(https://www.fillmurray.com/300/200)">
      <div class="ui dimmer">
        <div class="content">
          <div class="center">
            <div class="ui primary button"><i class="ui plus icon"></i>Select Template</div>
          </div>
        </div>
      </div>
      &nbsp;
    </div>
    <div class="content">
      <span class="header center aligned">When a title is too long it should trail off with an elipsis</span>
    </div>
  </a>
</div>
<script>
  $(function(){
    $('.special.cards .card .dimmer').dimmer({
      on: 'hover'
    });
  });
</script>

Sales Cards

Select Template
 
The best funnel in the world and in the universe
$14
Man on the moon
Select Template
 
Not the best funnel in the world and in the universe
$14
Man on the moon
Show Code 
  <div class="ui special sales cards cf-cards">
    <div class="card">
      <div class="blurring dimmable image" style="background-image:url(https://www.fillmurray.com/300/250)">
        <div class="ui dimmer">
          <div class="content">
            <div class="center">
              <div class="ui primary button"><i class="ui plus icon"></i>Select Template</div>
            </div>
          </div>
        </div>
        &nbsp;
      </div>
      <div class="description content">
        <div class="left floated">
          <span class="header center aligned">The best funnel in the world and in the universe</span>
        </div>
        <div class="right floated">
          <span>$14</span>
        </div>
      </div>
      <div class="meta content">
        <span class="left floated">
          Man on the moon
        </span>
        <span class="right floated">
          <i class="star icon"></i>
          <i class="star icon"></i>
          <i class="star icon"></i>
          <i class="star icon"></i>
          <i class="star icon"></i>
        </span>
      </div>
    </div>
    <div class="card">
      <div class="blurring dimmable image" style="background-image:url(https://www.fillmurray.com/300/250)">
        <div class="ui dimmer">
          <div class="content">
            <div class="center">
              <div class="ui primary button"><i class="ui plus icon"></i>Select Template</div>
            </div>
          </div>
        </div>
        &nbsp;
      </div>
      <div class="description content">
        <div class="left floated">
          <span class="header center aligned">Not the best funnel in the world and in the universe</span>
        </div>
        <div class="right floated">
          <span>$14</span>
        </div>
      </div>
      <div class="meta content">
        <span class="left floated">
          Man on the moon
        </span>
        <span class="right floated">
          <i class="star icon"></i>
          <i class="star icon"></i>
          <i class="star icon"></i>
        </span>
      </div>
    </div>
  </div>
  <script>
    $(function(){
      $('.special.cards .card .dimmer').dimmer({
        on: 'hover'
      });
    });
  </script>

You can enable the entire card to be clickable:

Select Template
 
Not the best funnel in the world and in the universe
$14
Man on the moon
Show Code 
  <div class="ui special sales cards cf-cards">
    <a href="//google.com" target="_blank" class="card">
      <div class="blurring dimmable image" style="background-image:url(https://www.fillmurray.com/300/250)">
        <div class="ui dimmer">
          <div class="content">
            <div class="center">
              <div class="ui primary button"><i class="ui plus icon"></i>Select Template</div>
            </div>
          </div>
        </div>
        &nbsp;
      </div>
      <div class="description content">
        <div class="left floated">
          <span class="header center aligned">Not the best funnel in the world and in the universe</span>
        </div>
        <div class="right floated">
          <span>$14</span>
        </div>
      </div>
      <div class="meta content">
        <span class="left floated">
          Man on the moon
        </span>
        <span class="right floated">
          <i class="star icon"></i>
          <i class="star icon"></i>
          <i class="star icon"></i>
        </span>
      </div>
    </a>
  </div>
  <script>
    $(function(){
      $('.special.cards .card .dimmer').dimmer({
        on: 'hover'
      });
    });
  </script>

No Margin cards (products)

lots of cards

odd amount of cards

No Margin 1 column cards (products)

No Margin game badge (dashboards)