Use shared Astro UI components across preview pages (#2724)

preview/pages/pricing-table.astro

@@ -1,11 +1,12 @@
 ---
-// Port of preview/pages/pricing-table.html.
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
-import Icon from '@shared/components/Icon.astro';
+import Icon from '@shared/components/ui/Icon.astro';
+import Card from '@shared/components/ui/Card.astro';
+import Subheader from '@shared/components/ui/Subheader.astro';
 ---
 
 <DefaultLayout title="Pricing table" pageHeader="Pricing table" pageMenu="extra.pricing-table">
-	<div class="card">
+	<Card>
 		 <div class="table-responsive">
 			  <table class="table table-vcenter table-bordered table-nowrap card-table">
 					<thead>
@@ -35,7 +36,7 @@ import Icon from '@shared/components/Icon.astro';
 					</thead>
 					<tbody>
 					<tr class="bg-surface-tertiary">
-						 <th colspan="4" class="subheader">Features</th>
+						 <Subheader as="th" colspan="4">Features</Subheader>
 					</tr>
 					<tr>
 						 <td>Some info about feature</td>
@@ -56,7 +57,7 @@ import Icon from '@shared/components/Icon.astro';
 						 <td class="text-center"><Icon name="check" class="text-green" /></td>
 					</tr>
 					<tr class="bg-surface-tertiary">
-						 <th colspan="4" class="subheader">Reporting</th>
+						 <Subheader as="th" colspan="4">Reporting</Subheader>
 					</tr>
 					<tr>
 						 <td>Free hosting and domain name</td>
@@ -71,7 +72,7 @@ import Icon from '@shared/components/Icon.astro';
 						 <td class="text-center"><Icon name="check" class="text-green" /></td>
 					</tr>
 					<tr class="bg-surface-tertiary">
-						 <th colspan="4" class="subheader">Support</th>
+						 <Subheader as="th" colspan="4">Support</Subheader>
 					</tr>
 					<tr>
 						 <td>Email marketing and service</td>
@@ -102,5 +103,5 @@ import Icon from '@shared/components/Icon.astro';
 					</tfoot>
 			  </table>
 		 </div>
-	</div>
+	</Card>
 </DefaultLayout>