docs(card): remove extra ios header styling from v7 playgrounds (#2762)

Author: averyjohnston

static/usage/v7/card/basic/angular/example_component_html.md renamed to static/usage/v7/card/basic/angular.md

@@ -7,20 +7,14 @@
   <title>Card</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
 
   <style>
     .container {
       max-width: 400px;
       margin: 0 auto;
     }
-
-    /* iOS places the subtitle above the title */
-    ion-card-header.ios {
-      display: flex;
-      flex-flow: column-reverse;
-    }
   </style>
 </head>
 

static/usage/v7/card/basic/angular/example_component_css.md

@@ -1,32 +1,12 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
+import react from './react.md';
 import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
+import angular from './angular.md';
 
 <Playground
   version="7"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
+  code={{ javascript, react, vue, angular }}
   src="usage/v7/card/basic/demo.html"
 />

static/usage/v7/card/basic/demo.html

@@ -9,12 +9,4 @@
     Here's a small text description for the card content. Nothing more, nothing less.
   </ion-card-content>
 </ion-card>
-
-<style>
-  /* iOS places the subtitle above the title */
-  ion-card-header.ios {
-    display: flex;
-    flex-flow: column-reverse;
-  }
-</style>
 ```

static/usage/v7/card/basic/index.md

@@ -2,8 +2,6 @@
 import React from 'react';
 import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
 
-import './main.css';
-
 function Example() {
   return (
     <IonCard>

static/usage/v7/card/basic/javascript.md

@@ -20,12 +20,4 @@
     components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
   });
 </script>
-
-<style scoped>
-  /* iOS places the subtitle above the title */
-  ion-card-header.ios {
-    display: flex;
-    flex-flow: column-reverse;
-  }
-</style>
 ```