4 Cards

Cards are used to display information in a visual, scannable manner. Use in scenarios when users want to associate an image with data, such as a Project or Site, or in association with user accounts where it is helpful to associate an image with a person using the system.

4.1 Cards on pages

At Desktop and Tablet inflections, it's recommended to show up to 25 cards before pagination. At the Mobile inflection, it's recommended to show up to 5 cards before pagination. When used as a summary for a complete list on a mixed content page, display 5 cards before “See All.”

4.2 Table summary for cards on mixed pages

Use cards summaries in order to give users quick access to multiple data type lists on a mixed page. When the number of entries is more than 5, provide a “See All” link to either show the complete list within that page or to go to another page and display the full list.

  • Primary Value

    You can click me!

    Active Label

  • Primary Value

    You can click me!

    Active Label

  • Primary Value

    You can click me!

    Active Label

  • Primary Value

    You can't click me, I'm static!

    Default Label

  • Primary Value

    You can't click me, I'm disabled!

    Active

Force the card layout to stay in one column. Built to be used within a existing grid column.

.dataCards-singleColumn

  • Primary Value

    You can click me!

    Active Label

  • Primary Value

    You can click me!

    Active Label

  • Primary Value

    You can click me!

    Active Label

  • Primary Value

    You can't click me, I'm static!

    Default Label

  • Primary Value

    You can't click me, I'm disabled!

    Active 

<ul class="dataCards {$modifiers}">
 <li class="y-add dataCard ">
    <button  type="button" class="y-add-btn">
        <span class="hyicon hyicon-add"></span>
        New Button
    </button>
 </li>
 <li class="dataCard">
   <div class="cardRow cardRowClickable">
       <p class="primaryData">
         Primary Value
       </p>
       <p class="secondaryData">
         You can click me!
       </p>
       <span class="label label-success">
         Active Label
       </span>
   </div>
 </li>
 <li class="dataCard">
   <div class="cardRow cardRowClickable">
       <p class="primaryData">
         Primary Value
       </p>
       <p class="secondaryData">
         You can click me!
       </p>
       <span class="label label-success">
         Active Label
       </span>
   </div>
 </li>
 <li class="dataCard">
   <div class="cardRow cardRowClickable">
       <p class="primaryData">
         Primary Value
       </p>
       <p class="secondaryData">
         You can click me!
       </p>
       <span class="label label-success">
         Active Label
       </span>
   </div>
 </li>
 <li class="dataCard">
   <div class="cardRow">
       <p class="primaryData">
         Primary Value
       </p>
       <p class="secondaryData">
         You can't click me, I'm static!
       </p>
         <span class="label label-default">
           Default Label
         </span>
   </div>
 </li>
 <li class="dataCard">
   <div class="cardRow cardRowDisabled">
       <p class="primaryData">
         Primary Value
       </p>
       <p class="secondaryData">
         You can't click me, I'm disabled!
       </p>
       <p class="statusDataValue">
         <span class="active">
           Active
         </span>
       </p>
   </div>
 </li>
</ul>
<div class="dataCard-seeall">
  <button class="btn btn-link">
        <span>See All</span>
        <span class="hyicon hyicon-chevron"></span>
    </button>
</div>

4.3 Grouped Cards with Section Headlines

In some cases it is useful to group data cards on a single page with clear section/sub-section headings. Also it may be useful to nest such groups and allow the display to scale gracefully. In these cases please use this modifier to the data card component.

Section Headline

Section 2 Headline

<div class="dataCards dataCards-grouped dataCards-singleColumn">
 <div class="dataCard-heading">
   <div class="cardRow">
     <h3>Section Headline</h3>
    </div>
 </div>
 <label class="dataCard" for="selectableCardDemo">
   <span class="cardRow cardRowClickable">
          <span class="display-inline-block dataCard-select">
              <span class="checkbox">
                  <input type="checkbox" id="selectableCardDemo" checked />
                  <label for="selectableCardDemo"></label>
              </span>
          </span>
          <span class="display-inline-block">
              <p class="primaryData">Primary Value</p>
              <p class="secondaryData">Secondary Data</p>
          </span>
      </span>
</label>
  <label class="dataCard" for="selectableCardDemo2">
      <span class="cardRow cardRowClickable">
          <span class="display-inline-block dataCard-select">
             <span class="checkbox">
                 <input type="checkbox" id="selectableCardDemo2" />
                 <label for="selectableCardDemo2"></label>
             </span>
         </span>
         <span class="display-inline-block">
             <p class="primaryData">Primary Value</p>
             <p class="secondaryData">Secondary Data</p>
         </span>
      </span>
</label>
</div>
<div class="dataCards dataCards-grouped dataCards-singleColumn">
 <div class="dataCard-heading">
   <div class="cardRow">
     <h3>Section 2 Headline</h3>
    </div>
 </div>
 <label class="dataCard" for="selectableCardDemo3">
   <span class="cardRow cardRowClickable">
         <span class="display-inline-block dataCard-select">
             <span class="checkbox">
                 <input type="checkbox" id="selectableCardDemo3"/>
                 <label for="selectableCardDemo3"></label>
             </span>
         </span>
         <span class="display-inline-block">
             <p class="primaryData">Primary Value</p>
             <p class="secondaryData">Secondary Data</p>
          </span>
      </span>
</label>
  <label class="dataCard" for="selectableCardDemo4">
      <span class="cardRow cardRowClickable">
          <span class="display-inline-block dataCard-select">
              <span class="checkbox">
                  <input type="checkbox" id="selectableCardDemo4" checked  />
                  <label for="selectableCardDemo4"></label>
              </span>
          </span>
          <span class="display-inline-block">
              <p class="primaryData">Primary Value</p>
              <p class="secondaryData">Secondary Data</p>
          </span>
      </span>
</label>
</div>