docs(material/card): use better example for overview (#30868)

Currently the only example we show when the user lands on the docs for the card is a plain card with one line of text. These changes switch to using the "fancy" example which we weren't surfacing anywhere.

Author: crisbeto

src/components-examples/material/card/card-fancy/card-fancy-example.html

@@ -1,3 +1,19 @@
-<mat-card appearance="outlined">
-  <mat-card-content>Simple card</mat-card-content>
+<mat-card class="example-card" appearance="outlined">
+  <mat-card-header>
+    <div mat-card-avatar class="example-header-image"></div>
+    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+  <mat-card-content>
+    <p>
+      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+      bred for hunting.
+    </p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button matButton>LIKE</button>
+    <button matButton>SHARE</button>
+  </mat-card-actions>
 </mat-card>

src/components-examples/material/card/card-fancy/card-fancy-example.ts

@@ -1,13 +1,15 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
 /**
- * @title Basic cards
+ * @title Card overview
  */
 @Component({
   selector: 'card-overview-example',
   templateUrl: 'card-overview-example.html',
-  imports: [MatCardModule],
+  styleUrl: 'card-overview-example.css',
+  imports: [MatCardModule, MatButtonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardOverviewExample {}

src/components-examples/material/card/card-fancy/card-fancy-example.css renamed to src/components-examples/material/card/card-overview/card-overview-example.css

@@ -1,4 +1,3 @@
-export {CardFancyExample} from './card-fancy/card-fancy-example';
 export {CardOverviewExample} from './card-overview/card-overview-example';
 export {CardHarnessExample} from './card-harness/card-harness-example';
 export {CardActionsExample} from './card-actions/card-actions-example';