initial draft of a kebab pattern and a card pattern

source/_data/data.json

@@ -11,6 +11,9 @@
   "tagClass" : "tag-default",
   "dropdownText" : "Dropdown",
   "dropdownAriaLabelledby": "Dropdown",
+  "cardTitleSize": "h4",
+  "cardTitle": "Title",
+  "cardContents": "Lorem ipsum dolor sit amet <a href> More Information</a>.",
   "dropdownList": ["Action", "Another action", "Something else here"],
   "breadcrumbList": ["Back to Top Level", "Second Level", "Third Level"],
   "img": {

source/_patterns/basics/dropdowns/00-dropdown.hbs

@@ -1,8 +1,8 @@
-<div class="dropdown {{ dropdownState }}" aria-labelledby="{{ dropdownAriaLabelledby }}">
+<div class="dropdown {{ dropdownState }} {{#if pullright}}pull-right{{/if}}" aria-labelledby="{{ dropdownAriaLabelledby }}">
   <button type="button" class="btn {{ btnClass }} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     {{ dropdownText }}
   </button>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu {{#if pullright}}dropdown-menu-right{{/if}}">
     {{#each dropdownList}}
       <a class="dropdown-item" href="#">{{this}}</a>
     {{/each}}

source/_patterns/basics/dropdowns/02-dropdown-styles.hbs

@@ -1,3 +1,4 @@
+{{> basics-dropdown dropdownText= "On Right" btnClass="btn-primary" pullright=true }}
 {{> basics-dropdown dropdownText= "Primary" btnClass="btn-primary" }}
 {{> basics-dropdown dropdownText= "Secondary" btnClass="btn-secondary" }}
 {{> basics-dropdown dropdownText= "Success" btnClass="btn-success" }}

source/_patterns/components/03-cards/00-card.hbs

@@ -0,0 +1,35 @@
+
+<div class="card pf-card {{#if textCenter}}text-xs-center{{/if}} {{#if cardAccent}}pf-card--accented{{/if}}">
+{{#if cardHeader}}
+  <div class="card-header">
+    {{#if cardHeaderDropdown}}
+      {{> basics-dropdown dropdownText="Dropdown" pullright=true }}
+    {{/if}}
+    <{{cardTitleSize}} class="card-title">{{{cardTitle}}}</{{cardTitleSize}}>
+  </div>
+  <div class="card-block">
+{{else}}
+  <div class="card-block">
+    {{#if cardTitleIconLarge}}
+        {{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--lg mb-pf-lg" }}
+    {{/if}}
+    {{#if cardTitleIconMedium}}
+        {{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--md mb-pf-md" }}
+    {{/if}}
+    <{{cardTitleSize}} class="card-title">{{{cardTitle}}}</{{cardTitleSize}}>
+{{/if}}
+{{#if @partial-block}}
+  {{> @partial-block}}
+{{else}}
+    <p class="card-text">{{{cardContents}}}</p>
+{{/if}}
+  </div>
+{{#if cardFooter}}
+  <div class="card-footer text-muted">
+    {{#if cardFooterDropdown}}
+      {{> basics-dropdown dropdownText="Dropdown" pullright=true }}
+    {{/if}}
+    {{{cardFooterContents}}}
+  </div>
+{{/if}}
+</div>

source/_patterns/components/03-cards/00-card.md

@@ -0,0 +1,14 @@
+---
+title: Card
+---
+## Overview
+
+This is a Bootstrap component, [see complete documentation here](http://v4-alpha.getbootstrap.com/components/card/)
+
+## Usage
+
+| Class | Usage |
+| -- | -- |
+| `.pf-card--accented` **Applied to:** `.card` |  **Outcome:** Displays a top border with an accent color  **Required:** No  |
+| `.pf-card--multiselect` **Applied to:** `.card` |  **Outcome:** Alters the card layout to accommodate a checkbox  **Required:** If displaying a checkbox in the card  |
+| `.pf-card__checkbox` **Applied to:** parent `div` of `<input type="checkbox">` |  **Outcome:** Alters the card layout to accommodate a checkbox  **Required:** No **Remarks:** Include class mentioned in previous row  |

source/_patterns/components/03-cards/01-card-accent.hbs

@@ -0,0 +1 @@
+  {{> components-card cardTitleSize="h3" cardTitle="Card with Accent" cardContents="This card has an accent" cardAccent=true  }}

source/_patterns/components/03-cards/01-card-footer-dropdown.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card Footer with Dropdown" cardContents="This card has a Footer and a dropdown menu in the footer." cardFooter=true cardFooterContents="Card Footer" cardFooterDropdown=true }}

source/_patterns/components/03-cards/01-card-footer.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card with Footer" cardContents="This card has a Footer." textCenter=true cardFooter=true cardFooterContents="Card Footer"}}

source/_patterns/components/03-cards/01-card-header-dropdown.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card Header with Dropdown" cardContents="This card has a header and a dropdown menu in the header." cardHeader=true cardHeaderDropdown=true }}

source/_patterns/components/03-cards/01-card-header.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h4" cardTitle="Card with Header" cardContents="This card has a header." textCenter=true cardHeader=true }}

source/_patterns/components/03-cards/01-card-icon-large.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h2" cardTitle="Card with Large Icon" cardContents="This card has a large title and a large icon, with centered text." textCenter=true cardTitleIconLarge=true }}

source/_patterns/components/03-cards/01-card-icon-medium.hbs

@@ -0,0 +1 @@
+{{> components-card cardTitleSize="h3" cardTitle="Card with Medium Icon" cardContents="This card has a medium size title and medium icon, with centered text" textCenter=true cardTitleIconMedium=true }}

source/scss/_pf-component-card.scss

@@ -11,7 +11,7 @@
 // bootstrap defaults.
 //
 
-.card{
+.pf-card {
   border: none;
 
   .card-header{
@@ -24,3 +24,6 @@
     border-top-color: $pf-card-border-color
   }
 }
+.pf-card--accented {
+  border-top: 2px solid $color-pf-blue-300;
+}