Cards

Standard Card

A card with a single CTA, ex: Save

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<card header-text="Card Title"><card-body>
    <form>
      <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>
      <card-body-action><button class="btn btn--secondary card__body-action-button" type="submit">Save</button></card-body-action>
    </form>
  </card-body></card>

Table Card

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

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
View Source 
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

<card header-text="Table Card Title"><card-body>
    <div class="t-small-body-sans" ng-init="tableCard = { expanded: false }">
      <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="card__table-action text-btn" 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="card__table-action text-btn" 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="card__table-action text-btn" 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="card__table-action text-btn" type="button">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <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></card-body-action></card-body></card>

Collapsible Card

A card with a single CTA, ex: Save

View Source 
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 ng-init="collapsibleCard = { step: 1 }">
  <card card-actionable="collapsibleCard.step == 1" card-collapsed="collapsibleCard.step != 1" card-inactive="collapsibleCard.step != 1"><card-header-text><span class="hidden-sm hidden-md">Account Details</span><span class="hidden-lg">Account</span></card-header-text><card-header-content><button class="card__action text-btn" ng-click="collapsibleCard.step = 1" ng-hide="collapsibleCard.step == 1" type="button">Edit </button></card-header-content><card-body>
      <div>
        <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>
      <card-body-action><button class="btn btn--secondary card__body-action-button" ng-click="collapsibleCard.step = 2" type="submit">Save </button></card-body-action></card-body></card><card card-actionable="collapsibleCard.step == 2" card-collapsed="collapsibleCard.step != 2" card-inactive="collapsibleCard.step != 2" header-text="Password"><card-header-content><button class="card__action text-btn" ng-click="collapsibleCard.step = 2" ng-hide="collapsibleCard.step == 2" type="button">Edit </button></card-header-content><card-body>
      <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>
      <card-body-action><button class="btn btn--secondary card__body-action-button" type="submit">Save </button></card-body-action></card-body></card>
</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

View Source 
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

<card header-text="Password"><card-body>
    <div ng-init="readOnlyEditCard = { step: 1, passwordCurrent: '', passwordNew: '', passwordConfirm: '' }" 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>
    <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></card-body-action></card-body></card>