More EuiCard props and added accessibility icon

src-docs/src/views/card/card_example.js

@@ -63,8 +63,8 @@ export const CardExample = {
           <p>
             For accessibility and heading heirarchy, a card&apos;s title element
             is a <EuiCode>span</EuiCode> by default. However, this can be
-            changed via the <EuiCode>titleElement</EuiCode> prop and it will
-            remain the same visual size.
+            changed via the <EuiCode>titleElement</EuiCode> prop without
+            altering the visual size..
           </p>
         </div>
       ),
@@ -184,8 +184,8 @@ export const CardExample = {
             color="warning"
             title={
               <span>
-                When using footers to display generic &quot;Go&quot; buttons.
-                You must provide an <EuiCode>aria-label</EuiCode> to the button
+                When using footers to display generic &quot;Go&quot; buttons,
+                you must provide an <EuiCode>aria-label</EuiCode> to the button
                 itself that refers back to the title of the card.
               </span>
             }

src-docs/src/views/card/card_layout.js

@@ -14,7 +14,7 @@ export default () => (
         layout="horizontal"
         icon={<EuiIcon size="xl" type={'logoBeats'} />}
         title={'Elastic Beats'}
-        description="This card adds uses an xl size icon and it works well in a horizontal layout."
+        description="This card adds uses an 'xl' size icon which works well in a horizontal layout."
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>
@@ -24,7 +24,7 @@ export default () => (
         icon={<EuiIcon size="l" type={'logoCloud'} />}
         titleSize="xs"
         title={'Elastic Cloud'}
-        description="This card uses a large size icon but also shrinks its titleSize to xs."
+        description="This card uses an 'l' size icon but also shrinks the 'titleSize' to 'xs'."
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>

src-docs/src/views/form_compressed/form_compressed_example.js

@@ -205,7 +205,7 @@ export const FormCompressedExample = {
               <span>
                 Pay close attention to the patterns of using{' '}
                 <EuiCode>htmlFor</EuiCode> and <EuiCode>aria-label</EuiCode>.
-                For best results each form control that is not wrapped in an
+                For best results, each form control that is not wrapped in an
                 EuiFormRow should be supplied an <EuiCode>id</EuiCode>.
               </span>
             }

src/components/card/card.tsx

@@ -55,7 +55,7 @@ type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
 
   /**
    * Determines the title's size, matching that of EuiTitle.
-   * Though, card titles can't be too large or smaller than the description text.
+   * Though, card titles can't be too large or small relative to the description text.
    */
   titleSize?: 's' | 'xs';
 
@@ -126,7 +126,7 @@ type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
   selectable?: EuiCardSelectProps;
 
   /**
-   * Visual display of the card. Display as 'panel' or 'plain' (without a border and shadow).
+   * Visual display of the card. Display as 'panel' or 'plain'.
    * Selectable cards will always display as 'panel'.
    */
   display?: CardDisplay;