main - 3b329e9 docs(material/card): use better example for overview (#30868)

Author: crisbeto

docs-content/examples-highlighted/material/card/card-fancy/card-fancy-example-html.html

@@ -1,3 +1,19 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">mat-card</span> <span class="hljs-attr">appearance</span>=<span class="hljs-string">&quot;outlined&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">mat-card-content</span>&gt;</span>Simple card<span class="hljs-tag">&lt;/<span class="hljs-name">mat-card-content</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-card</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-card&quot;</span> <span class="hljs-attr">appearance</span>=<span class="hljs-string">&quot;outlined&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-card-header</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">mat-card-avatar</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-header-image&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">mat-card-title</span>&gt;</span>Shiba Inu<span class="hljs-tag">&lt;/<span class="hljs-name">mat-card-title</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">mat-card-subtitle</span>&gt;</span>Dog Breed<span class="hljs-tag">&lt;/<span class="hljs-name">mat-card-subtitle</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">mat-card-header</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">mat-card-image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://material.angular.io/assets/img/examples/shiba2.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;Photo of a Shiba Inu&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-card-content</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
+      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.
+    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">mat-card-content</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-card-actions</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matButton</span>&gt;</span>LIKE<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matButton</span>&gt;</span>SHARE<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">mat-card-actions</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">mat-card</span>&gt;</span>

docs-content/examples-highlighted/material/card/card-fancy/card-fancy-example-ts.html

@@ -1,13 +1,15 @@
 <span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatButtonModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/button&#x27;</span>;
 <span class="hljs-keyword">import</span> {MatCardModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/card&#x27;</span>;
 
 <span class="hljs-comment">/**
- * <span class="hljs-doctag">@title </span>Basic cards
+ * <span class="hljs-doctag">@title </span>Card overview
  */</span>
 <span class="hljs-meta">@Component</span>({
   <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;card-overview-example&#x27;</span>,
   <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;card-overview-example.html&#x27;</span>,
-  <span class="hljs-attr">imports</span>: [MatCardModule],
+  <span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;card-overview-example.css&#x27;</span>,
+  <span class="hljs-attr">imports</span>: [MatCardModule, MatButtonModule],
   <span class="hljs-attr">changeDetection</span>: ChangeDetectionStrategy.OnPush,
 })
 <span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CardOverviewExample</span> </span>{}

…d/card-fancy/card-fancy-example-css.html …-overview/card-overview-example-css.htmldocs-content/examples-highlighted/material/card/card-fancy/card-fancy-example-css.html renamed to docs-content/examples-highlighted/material/card/card-overview/card-overview-example-css.html docs-content/examples-highlighted/material/card/card-fancy/card-fancy-example-css.html renamed to docs-content/examples-highlighted/material/card/card-overview/card-overview-example-css.html

@@ -1,4 +1,3 @@
-<span class="hljs-keyword">export</span> {CardFancyExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./card-fancy/card-fancy-example&#x27;</span>;
 <span class="hljs-keyword">export</span> {CardOverviewExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./card-overview/card-overview-example&#x27;</span>;
 <span class="hljs-keyword">export</span> {CardHarnessExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./card-harness/card-harness-example&#x27;</span>;
 <span class="hljs-keyword">export</span> {CardActionsExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./card-actions/card-actions-example&#x27;</span>;

docs-content/examples-highlighted/material/card/card-overview/card-overview-example-html.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>