feat(pfe-card) 2.0 doc changes

elements/pfe-card/docs/index.md

@@ -11,6 +11,9 @@ tags:
 ---
 
 {% renderOverview for=package, title=title %}
+
+  Cards are flexible surfaces used to group information in a small layout. They give small previews of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.
+
   <div class="pfe-l-grid pfe-m-gutters pfe-m-all-6-col pfe-m-all-4-col-on-md">
     <pfe-card>
       <h3 slot="header">Default card</h3>
@@ -86,14 +89,10 @@ tags:
 {% endrenderSlots %}
 
 {% renderAttributes for=package %}
-  There are several attributes available for customizing the visual treatment of this container.
 
-  ### Child Attributes
+  #### `overflow` (child element attribute)
+  Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slot such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`.
 
-  #### `overflow`
-  Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slotm such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`.
-
-  -----
 {% endrenderAttributes %}
 
 {% renderProperties for=package %}{% endrenderProperties %}
@@ -102,24 +101,6 @@ tags:
 
 {% renderEvents for=package %}{% endrenderEvents %}
 
-{% renderCssCustomProperties for=package %}
-  There are several powerful variables available to hook into and override default styles.
-
-  ### Background color
-  Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--theme` context variable to invoke the right theme on it and it's child elements.  Supported themes include: `light`, `dark`, and `saturated`.
-
-  ### Background position
-  This is designed for use with the `img-src` attribute to allow you to align your background image.  Default value is `center center`.
-
-  **Variable name:** `--pfe-card--BackgroundPosition`.
-
-  ### Border
-  This allows the customization of a border around the entire container.  There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties.
-  **Variable name:** `--pfe-card--BorderRadius` and `--pfe-card--Border` or `--pfe-card--BorderWeight`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor`.
-
-  ### Padding
-  You can customize the padding around the outside of the card container by connecting to either the shortcut padding variable or just one or more of the individual padding regions.
-  **Variable names:** `--pfe-card--Padding` or `--pfe-card--PaddingTop`, `--pfe-card--PaddingRight`, `--pfe-card--PaddingBottom`, `--pfe-card--PaddingLeft`.
-{% endrenderCssCustomProperties %}
+{% renderCssCustomProperties for=package %}{% endrenderCssCustomProperties %}
 
 {% renderCssParts for=package %}{% endrenderCssParts %}

elements/pfe-card/pfe-card.ts

@@ -17,6 +17,25 @@ import style from './pfe-card.scss';
  * @slot - Any content that is not designated for the header or footer slot, will go to this slot.
  * @slot footer
  *       Use this slot for anything that you want to be stuck to the base of the card. This region is bottom-aligned.
+ *
+ * @cssproperty --pfe-band--BackgroundColor
+ *              Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--theme` context variable to invoke the right theme on it and it's child elements.  Supported themes include: `light`, `dark`, and `saturated`.
+ * @cssproperty --pfe-card--BackgroundPosition
+ *              This is designed for use with the `img-src` attribute to allow you to align your background image.  Default value is `center center`.
+ *              {@default `center center`}
+ * @cssproperty --pfe-card--Border
+ *              This allows the customization of a border around the entire container.
+ *              {@default `center center`}
+ * @cssproperty --pfe-card--Border
+ *              This allows the customization of a border around the entire container.
+ * @cssproperty --pfe-card--BorderRadius
+ *              This allows the customization of a border radius around the entire container.
+ * @cssproperty --pfe-card--BorderWeight
+ *              This allows the customization of a border weight around the entire container.
+ * @cssproperty --pfe-card--BorderStyle
+ *              This allows the customization of a border style around the entire container.
+ * @cssproperty --pfe-card--BorderColor
+ *              This allows the customization of a border color around the entire container.
  */
 @customElement('pfe-card') @pfelement()
 export class PfeCard extends LitElement {