Added a first version of the header card frontend rendering

refs https://github.com/TryGhost/Team/issues/1253

- Based on the editor card, the css isn't correct yet as it has undefined css variables

core/frontend/src/cards/css/header.css

@@ -0,0 +1,127 @@
+.kg-header-card {
+    padding-left: 4em;
+    padding-right: 4em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
+    transition: background-color var(--animation-speed-fast) ease-in-out;
+}
+
+.kg-header-card h2,
+.kg-header-card h3 {
+    color: var(--white);
+    margin-top: 0 !important;
+}
+
+.kg-header-card h2 {
+    font-size: 5em;
+    font-weight: 700;
+}
+
+.kg-header-card.kg-size-small {
+    padding-top: 4em;
+    padding-bottom: 4em;
+    height: 40vh;
+    min-height: auto;
+}
+
+.kg-header-card.kg-size-medium {
+    padding-top: 6em;
+    padding-bottom: 6em;
+    height: 60vh;
+    min-height: auto;
+}
+
+.kg-header-card.kg-size-large {
+    padding-top: 12em;
+    padding-bottom: 12em;
+    height: 80vh;
+    min-height: auto;
+}
+
+.kg-header-card.kg-size-large h2 {
+    font-size: 6em;
+}
+
+.kg-header-card.kg-size-small h2 {
+    font-size: 4em;
+}
+
+.kg-header-card h2 strong {
+    font-weight: 800;
+}
+
+.kg-header-card h3 {
+    font-size: 1.5em;
+    font-weight: 500;
+}
+
+.kg-header-card.kg-size-large h3 {
+    font-size: 1.75em;
+}
+
+.kg-header-card.kg-size-small h3 {
+    font-size: 1.25em;
+}
+
+.kg-header-card.kg-align-left {
+    text-align: left;
+    align-items: flex-start;
+}
+
+.kg-header-card.kg-align-center {
+    text-align: center;
+    align-items: center;
+}
+
+.kg-header-card.kg-style-invert {
+    background: var(--black);
+    color: var(--white);
+}
+
+.kg-header-card.kg-style-clear {
+    color: var(--black);
+    border: 1px solid var(--lightgrey);
+    border-width: 1px 0;
+}
+
+.kg-header-card.kg-style-clear h2,
+.kg-header-card.kg-style-clear h3 {
+    color: var(--black);
+}
+
+.kg-header-card.kg-style-accent {
+    background-color: var(--accent-color);
+}
+
+.kg-header-card.kg-style-image {
+    background-color: #e7e7eb;
+    background-size: cover;
+    background-position: center center;
+}
+
+.kg-header-card-button {
+    margin-top: 1.75em;
+    font-weight: 700;
+}
+
+.kg-size-large .kg-header-card-button {
+    margin-top: 2em;
+}
+
+.kg-size-small .kg-header-card-button {
+    margin-top: 1.5em;
+}
+
+.kg-style-invert .kg-header-card-button,
+.kg-style-image .kg-header-card-button {
+    background: var(--white);
+    color: var(--black);
+}
+
+.kg-style-accent .kg-header-card-button {
+    background: var(--white);
+    color: var(--accent-color);
+}

package.json

@@ -73,7 +73,7 @@
     "@tryghost/job-manager": "0.8.17",
     "@tryghost/kg-card-factory": "3.1.0",
     "@tryghost/kg-default-atoms": "3.1.0",
-    "@tryghost/kg-default-cards": "5.14.8",
+    "@tryghost/kg-default-cards": "5.15.0",
     "@tryghost/kg-markdown-html-renderer": "5.1.0",
     "@tryghost/kg-mobiledoc-html-renderer": "5.3.1",
     "@tryghost/limit-service": "1.0.7",

yarn.lock

@@ -1503,10 +1503,10 @@
   resolved "https://registry.npmjs.org/@tryghost/kg-default-atoms/-/kg-default-atoms-3.1.0.tgz"
   integrity sha512-FfROzVgqJWqJ7cVdS9dcALz7rnzNfV8zcrymAJrDTHDsqzAdMfSLe1tNQRm8zas9pyZLsD8zBGmLxG9dr4WFSA==
 
-"@tryghost/kg-default-cards@5.14.8":
+"@tryghost/kg-default-cards@5.15.0":
-  version "5.14.8"
+  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.14.8.tgz#cc930321545961ebc53bee07310bc119b4b54ef3"
+  resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.15.0.tgz#7a85bfc121947babcfa2b9a13ab1eecaffe27349"
-  integrity sha512-ZBfePGqSnhNkuwXsK2Agrz1OHEQg86rs67obkjpR+/9b/LYOnzR0WAzY/ayLqvpnbluTlHb+e/YsT6QxtDRajg==
+  integrity sha512-MnDpRIwgJ+wI+OAR/hj4QBWK3HB5eYKHmlaYO8dBWAs1K2LhIKUadm+jAoM7hyOu0LtKeIcU/YLdVfJs2Bkj0w==
   dependencies:
     "@tryghost/kg-markdown-html-renderer" "^5.1.0"
     "@tryghost/url-utils" "^2.0.0"