Cards

Standard Card

Light

Create your profile
Already have a profile? Sign in
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="card">
  <div class="card__header">
    <div class="card__header-text">
      Create your profile
    </div>
    <div class="card__header-content">
      Already have a profile? <a href="javascript://">Sign in</a>
    </div>
  </div>
  <div class="card__body">
    <div class="card__body-content">
      <form>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="col--lg-12">
              <div class="form-field">
                <input id="card_first_name" type="text" /><label for="card_first_name">First Name</label>
              </div>
            </div>
            <div class="col--lg-12">
              <div class="form-field">
                <input id="card_last_name" type="text" /><label for="card_last_name">Last Name</label>
              </div>
            </div>
            <div class="col--lg-24">
              <div class="form-field">
                <input id="card_email_address" type="text" /><label for="card_email_address">Email address</label>
              </div>
            </div>
            <div class="col--lg-24">
              <div class="form-field">
                <input id="card_password" type="password" /><label for="card_password">Create password</label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="submit-form col--lg-12">
              <input class="btn" type="submit" value="Create Profile" />
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Standard Card

Dark, with subtitle

Refer a Friend, Earn $25
Tell your friends about us and earn some cash!
Or share with your personal referral link:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="card">
  <div class="card__header card__header-dark">
    <div class="card__header-text-with-subtitle">
      <div class="card__header-text">
        Refer a Friend, Earn $25
      </div>
      <div class="card__header-subtitle">
        Tell your friends about us and earn some cash!
      </div>
    </div>
  </div>
  <div class="card__body">
    <div class="card__body-content">
      <form>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="col--lg-24">
              <div class="form-field">
                <input id="card_first_name" type="text" /><label for="card_first_name">Friend's name</label>
              </div>
            </div>
            <div class="col--lg-24">
              <div class="form-field">
                <input id="card_last_name" type="text" /><label for="card_last_name">Friend's email</label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="col--lg-12">
              <div class="t-small-body-sans">
                Or share with your personal referral link: 
              </div>
              <div class="t-small-body-sans">
                <a class="card__link" href="#">bspk.me/277a591a</a>
              </div>
            </div>
            <div class="submit-form col--lg-12">
              <input class="btn" type="submit" value="Submit" />
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Standard Card

Light, with table

Invites
Email
Status
user1@email.com
active
user2@email.com
active
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="card">
  <div class="card__header">
    <div class="card__header-text">
      Invites 
    </div>
  </div>
  <div class="card__body">
    <div class="card__body-content">
      <div class="card__table">
        <div class="row">
          <div class="card__table-header col--sm-2-of-4 col--lg-6-of-10">
            Email
          </div>
          <div class="card__table-header col--sm-2-of-4 col--lg-4-of-10">
            Status
          </div>
        </div>
        <div class="card__table-body">
          <div class="card__table-item">
            <div class="row">
              <div class="col--sm-2-of-4 col--lg-6-of-10 card__table-cell">
                user1@email.com 
              </div>
              <div class="col--sm-2-of-4 col--lg-4-of-10 card__table-cell">
                active 
              </div>
            </div>
          </div>
          <div class="card__table-item">
            <div class="row row--narrow">
              <div class="col--sm-2-of-4 col--lg-6-of-10 card__table-cell">
                user2@email.com 
              </div>
              <div class="col--sm-2-of-4 col--lg-4-of-10 card__table-cell">
                active 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Standard Card

Light, with table and actions

Credit Cards
Card
Visa ending in 4242
Visa ending in 4242
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="card">
  <div class="card__header">
    <div class="card__header-text">
      Credit Cards 
    </div>
  </div>
  <div class="card__body">
    <div class="card__body-content">
      <div class="card__table">
        <div class="card__table-header">
          Card
        </div>
        <div class="card__table-body">
          <div class="card__table-item">
            <div class="row">
              <div class="col--lg-5-of-10 card__table-cell">
                Visa ending in 4242 
              </div>
              <div class="col--lg-5-of-10 card__table-cell">
                <ul class="card__navigation">
                  <li class="card__navigation-item">
                    <a href="#">Make Primary</a>
                  </li>
                  <li class="card__navigation-item">
                    <a href="#">Delete</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="card__table-item">
            <div class="row">
              <div class="col--lg-5-of-10 card__table-cell">
                Visa ending in 4242 
              </div>
              <div class="col--lg-5-of-10 card__table-cell">
                <ul class="card__navigation">
                  <li class="card__navigation-item">
                    <a href="#">Make Primary</a>
                  </li>
                  <li class="card__navigation-item">
                    <a href="#">Delete</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Collapsible Card

Light

Size
Edit
Toppings
Edit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div ng-init="card = { step: 'size' }">
  <div class="card" ng-class="{ 'card--inactive': card.step != 'size', 'card--actionable': card.step != 'size' }">
    <div class="card__header">
      <div class="card__header-text">
        Size
      </div>
      <div class="card__header-content">
        <span class="card__action" ng-click="card.step = 'size'" ng-hide="card.step == 'size'">Edit </span>
      </div>
    </div>
    <div class="card__body a-collapsible" ng-class="{ 'a-collapsible--collapsed': card.step != 'size' }">
      <div class="card__body-content">
        <div class="form-section">
          <div class="form-field">
            <div class="row row--narrow">
              <div class="col--lg-12">
                <input id="card_size_12" name="pizza_size" type="radio" /><label for="card_size_12">12&quot; Personal Pie</label>
              </div>
              <div class="col--lg-12">
                <input id="card_size_18" name="pizza_size" type="radio" /><label for="card_size_18">18&quot; Pie</label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="submit-form col--lg-12">
              <input class="btn" ng-click="card.step = 'toppings'" type="button" value="Continue" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card" ng-class="{ 'card--inactive': card.step != 'toppings', 'card--actionable': card.step != 'toppings' }">
    <div class="card__header">
      <div class="card__header-text">
        Toppings
      </div>
      <div class="card__header-content">
        <span class="card__action" ng-click="card.step = 'toppings'" ng-hide="card.step == 'toppings'">Edit </span>
      </div>
    </div>
    <div class="card__body a-collapsible" ng-class="{ 'a-collapsible--collapsed': card.step != 'toppings' }">
      <div class="card__body-content">
        <div class="form-section">
          <div class="form-field">
            <div class="row row--narrow">
              <div class="col--lg-12">
                <input id="card_pepperoni" type="checkbox" /><label for="card_pepperoni">Pepperoni</label>
              </div>
              <div class="col--lg-12">
                <input id="card_sausage" type="checkbox" /><label for="card_sausage">Sausage</label>
              </div>
              <div class="col--lg-12">
                <input id="card_mushrooms" type="checkbox" /><label for="card_mushrooms">Mushrooms</label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="submit-form col--lg-12">
              <input class="btn" type="button" value="Place Order" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Collapsible Card

Dark

Size
Edit
Toppings
Edit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div ng-init="dark_card = { step: 'size' }">
  <div class="card" ng-class="{ 'card--inactive': dark_card.step != 'size', 'card--actionable': dark_card.step != 'size' }">
    <div class="card__header card__header-dark">
      <div class="card__header-text">
        Size
      </div>
      <div class="card__header-content">
        <span class="card__action" ng-click="dark_card.step = 'size'" ng-hide="dark_card.step == 'size'">Edit </span>
      </div>
    </div>
    <div class="card__body a-collapsible" ng-class="{ 'a-collapsible--collapsed': dark_card.step != 'size' }">
      <div class="card__body-content">
        <div class="form-section">
          <div class="form-field">
            <div class="row row--narrow">
              <div class="col--lg-12">
                <input id="dark_card_size_12" name="pizza_size" type="radio" /><label for="dark_card_size_12">12&quot; Personal Pie</label>
              </div>
              <div class="col--lg-12">
                <input id="dark_card_size_18" name="pizza_size" type="radio" /><label for="dark_card_size_18">18&quot; Pie</label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="submit-form col--lg-12">
              <input class="btn" ng-click="dark_card.step = 'toppings'" type="button" value="Continue" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card" ng-class="{ 'card--inactive': dark_card.step != 'toppings', 'card--actionable': dark_card.step != 'toppings' }">
    <div class="card__header card__header-dark">
      <div class="card__header-text">
        Toppings
      </div>
      <div class="card__header-content">
        <span class="card__action" ng-click="dark_card.step = 'toppings'" ng-hide="dark_card.step == 'toppings'">Edit </span>
      </div>
    </div>
    <div class="card__body a-collapsible" ng-class="{ 'a-collapsible--collapsed': dark_card.step != 'toppings' }">
      <div class="card__body-content">
        <div class="form-section">
          <div class="form-field">
            <div class="row row--narrow">
              <div class="col--lg-12">
                <input id="dark_card_pepperoni" type="checkbox" /><label for="dark_card_pepperoni">Pepperoni</label>
              </div>
              <div class="col--lg-12">
                <input id="dark_card_sausage" type="checkbox" /><label for="dark_card_sausage">Sausage</label>
              </div>
              <div class="col--lg-12">
                <input id="dark_card_mushrooms" type="checkbox" /><label for="dark_card_mushrooms">Mushrooms</label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-section">
          <div class="row row--narrow">
            <div class="submit-form col--lg-12">
              <input class="btn" type="button" value="Place Order" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>