Cards

Standard Card

A card with a single CTA, ex: Save

Card Title
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
<div class="card">
  <div class="card__header">
    <div class="card__header-text">
      Card Title
    </div>
  </div>
  <form class="card__body">
    <div class="card__body-content">
      <div class="row row--narrow">
        <div class="col--lg-12">
          <div class="form-field">
            <input id="standard_card_first_name" type="text" value="Mike" /><label for="standard_card_first_name">First Name</label>
          </div>
        </div>
        <div class="col--lg-12">
          <div class="form-field">
            <input id="standard_card_email_address" type="text" value="mike@example.com" /><label for="standard_card_email_address">Email</label>
          </div>
        </div>
        <div class="col--lg-12">
          <div class="form-field u-space-bottom-0">
            <input id="standard_card_last_name" type="text" value="Wazowski" /><label for="standard_card_last_name">Last Name</label>
          </div>
        </div>
      </div>
    </div>
    <div class="card__body-action">
      <button class="btn btn--secondary card__body-action-button" type="submit">Save</button>
    </div>
  </form>
</div>

Table Card

A card with table, in-line actions, and expand-ability

Table Card Title
Order ID Date Order Info
12345678 Jan 6, 2020
Cooldown
Box
12345677 Jan 5, 2020
Slumber (White (Full/Queen))
Box
12345676 Jan 4, 2020
Concentrate
Box
12345675 Jan 3, 2020
Refresh
Box
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<div class="card">
  <div class="card__header">
    <div class="card__header-text">
      Table Card Title 
    </div>
  </div>
  <div class="card__body" ng-init="tableCard = { expanded: false }">
    <div class="card__body-content t-small-body-sans">
      <table class="card__table">
        <thead class="card__table-header">
          <tr>
            <th class="card__table-header-cell t-tiny-body-sans">
              Order ID
            </th>
            <th class="card__table-header-cell t-tiny-body-sans">
              Date
            </th>
            <th class="card__table-header-cell t-tiny-body-sans">
              Order Info
            </th>
          </tr>
        </thead>
        <tbody class="card__table-body">
          <tr class="card__table-row">
            <td class="card__table-cell">
              12345678
            </td>
            <td class="card__table-cell">
              Jan 6, 2020
            </td>
            <td class="card__table-cell">
              <div>
                Cooldown
              </div>
              <div class="t-tiny-body-sans c-gray-dark-40">
                Box
              </div>
            </td>
            <td class="card__table-cell u-text-align-right">
              <button class="text-btn u-border-width-0" type="button">Delete</button>
            </td>
          </tr>
          <tr class="card__table-row">
            <td class="card__table-cell">
              12345677
            </td>
            <td class="card__table-cell">
              Jan 5, 2020
            </td>
            <td class="card__table-cell">
              <div>
                Slumber (White (Full/Queen))
              </div>
              <div class="t-tiny-body-sans c-gray-dark-40">
                Box
              </div>
            </td>
            <td class="card__table-cell u-text-align-right">
              <button class="text-btn u-border-width-0" type="button">Delete</button>
            </td>
          </tr>
          <tr class="card__table-row" ng-show="tableCard.expanded">
            <td class="card__table-cell">
              12345676
            </td>
            <td class="card__table-cell">
              Jan 4, 2020
            </td>
            <td class="card__table-cell">
              <div>
                Concentrate
              </div>
              <div class="t-tiny-body-sans c-gray-dark-40">
                Box
              </div>
            </td>
            <td class="card__table-cell u-text-align-right">
              <button class="text-btn u-border-width-0" type="button">Delete</button>
            </td>
          </tr>
          <tr class="card__table-row" ng-show="tableCard.expanded">
            <td class="card__table-cell">
              12345675
            </td>
            <td class="card__table-cell">
              Jan 3, 2020
            </td>
            <td class="card__table-cell">
              <div>
                Refresh
              </div>
              <div class="t-tiny-body-sans c-gray-dark-40">
                Box
              </div>
            </td>
            <td class="card__table-cell u-text-align-right">
              <button class="text-btn u-border-width-0" type="button">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="card__body-action">
      <button class="btn btn--secondary card__body-action-button card__body-action-button--minor" ng-click="tableCard.expanded = !tableCard.expanded" ng-switch="tableCard.expanded" type="button"><span ng-switch-when="true">Collapse</span><span ng-switch-when="false">Expand</span></button>
    </div>
  </div>
</div>

Collapsible Card

A card with a single CTA, ex: Save

Card Title
Card Title
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
<div ng-init="collapsibleCard = { step: 1 }">
  <div class="card" ng-class="{ 'card--inactive': collapsibleCard.step != 1, 'card--actionable': collapsibleCard.step == 1 }">
    <div class="card__header">
      <div class="card__header-text">
        Card Title
      </div>
      <div class="card__header-content">
        <span class="card__action" ng-click="collapsibleCard.step = 1" ng-hide="collapsibleCard.step == 1"><button class="text-btn u-border-width-0" type="button">Edit</button></span>
      </div>
    </div>
    <div class="card__body a-collapsible" ng-class="{ 'a-collapsible--collapsed': collapsibleCard.step != 1 }">
      <div class="card__body-content">
        <div class="row row--narrow">
          <div class="col--lg-12">
            <div class="form-field">
              <input id="collapsible_card_first_name" type="text" value="Mike" /><label for="collapsible_card_first_name">First Name</label>
            </div>
          </div>
          <div class="col--lg-12">
            <div class="form-field">
              <input id="collapsible_card_email_address" type="text" value="mike@example.com" /><label for="collapsible_card_email_address">Email</label>
            </div>
          </div>
          <div class="col--lg-12">
            <div class="form-field u-space-bottom-0">
              <input id="collapsible_card_last_name" type="text" value="Wazowski" /><label for="collapsible_card_last_name">Last Name</label>
            </div>
          </div>
        </div>
      </div>
      <div class="card__body-action">
        <button class="btn btn--secondary card__body-action-button" ng-click="collapsibleCard.step = 2" type="submit">Save </button>
      </div>
    </div>
  </div>
  <div class="card" ng-class="{ 'card--inactive': collapsibleCard.step != 2, 'card--actionable': collapsibleCard.step == 2 }">
    <div class="card__header">
      <div class="card__header-text">
        Card Title
      </div>
      <div class="card__header-content">
        <span class="card__action" ng-click="collapsibleCard.step = 2" ng-hide="collapsibleCard.step == 2"><button class="text-btn u-border-width-0" type="button">Edit</button></span>
      </div>
    </div>
    <div class="card__body a-collapsible" ng-class="{ 'a-collapsible--collapsed': collapsibleCard.step != 2 }">
      <div class="card__body-content">
        <div class="row row--narrow">
          <div class="col--lg-12">
            <div class="form-field u-space-bottom-0">
              <input id="collapsible_card_password" type="password" value="SomePassword" /><label for="collapsible_card_password">Password</label>
            </div>
          </div>
        </div>
      </div>
      <div class="card__body-action">
        <button class="btn btn--secondary card__body-action-button" type="submit">Save </button>
      </div>
    </div>
  </div>
</div>

Read-Only / Edit Card

A card when users have to unlock the fields before they edit them, bringing them to a editable form field within the card, with an option to save

Password
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
<div class="card">
  <div class="card__header">
    <div class="card__header-text">
      Password
    </div>
  </div>
  <div class="card__body" ng-init="readOnlyEditCard = { step: 1, passwordCurrent: '', passwordNew: '', passwordConfirm: '' }">
    <div class="card__body-content" ng-switch="readOnlyEditCard.step">
      <div ng-switch-when="1">
        <div class="row row--narrow u-display-flex u-align-items-center">
          <div class="col--lg-12">
            <div class="form-field u-space-bottom-0">
              <input disabled="" id="read_only_edit_card_password_default" type="password" value="SomePassword" /><label for="read_only_edit_card_password_default">Password</label>
            </div>
          </div>
          <div class="col--lg-12">
            <div class="form-field u-space-bottom-0">
              <button class="text-btn u-border-width-0" ng-click="readOnlyEditCard.step = 2" type="button">Change Password </button>
            </div>
          </div>
        </div>
      </div>
      <div ng-switch-when="2">
        <div class="row row--narrow">
          <div class="col--lg-12 u-space-bottom-3">
            <button class="text-btn u-border-width-0 u-display-flex u-align-items-center" ng-click="readOnlyEditCard.step = 1" type="button"><span class="u-width-5 u-height-5 u-space-right-n1 u-space-left-n1" custicon="chevron-left" responsive-icon="true"></span>Cancel </button>
          </div>
          <div class="col--lg-12 col--lg-reset">
            <div class="form-field">
              <input id="read_only_edit_card_password_default" ng-model="readOnlyEditCard.passwordCurrent" type="password" /><label for="read_only_edit_card_password_default">Current Password</label>
            </div>
          </div>
          <div class="col--lg-12 col--lg-reset">
            <div class="form-field">
              <input id="read_only_edit_card_password_new" ng-model="readOnlyEditCard.passwordNew" type="password" /><label for="read_only_edit_card_password_new">New Password</label>
            </div>
          </div>
          <div class="col--lg-12 col--lg-reset">
            <div class="form-field u-space-bottom-0">
              <input id="read_only_edit_card_password_confirm" ng-model="readOnlyEditCard.passwordConfirm" type="password" /><label for="read_only_edit_card_password_confirm">Confirm Password</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card__body-action" ng-show="readOnlyEditCard.step != 1">
      <button class="btn btn--secondary card__body-action-button" ng-disabled="!readOnlyEditCard.passwordCurrent || !readOnlyEditCard.passwordNew || !readOnlyEditCard.passwordConfirm" type="submit">Save </button>
    </div>
  </div>
</div>