Add dev page with custom header

Author: jperals

pages/card/image-preview-with-custom-header.page.tsx

@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import ButtonGroup from '~components/button-group';
+import Card from '~components/internal/components/card';
+
+import image from '../container/images/16-9.png';
+import { CardPage } from './common';
+
+export default function ButtonsScenario() {
+  return (
+    <article>
+      <CardPage title="Image preview">
+        <Card
+          header={
+            <>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>image-title.jpg</div>
+                <ButtonGroup
+                  onItemClick={() => null}
+                  items={[
+                    {
+                      type: 'icon-button',
+                      id: 'download',
+                      iconName: 'download',
+                      text: 'Download',
+                    },
+                    {
+                      type: 'icon-button',
+                      id: 'expand',
+                      iconName: 'expand',
+                      text: 'Expand',
+                    },
+                  ]}
+                  variant={'icon'}
+                />
+              </div>
+              <Box color="text-body-secondary">Metadata about file - 4GB</Box>
+            </>
+          }
+          disableContentPaddings={true}
+        >
+          <div
+            style={{
+              backgroundImage: `url(${image})`,
+              backgroundPosition: 'center',
+              backgroundSize: 'cover',
+              width: '100%',
+              height: 300,
+            }}
+          />
+        </Card>
+      </CardPage>
+    </article>
+  );
+}

src/internal/components/card/styles.scss

@@ -72,14 +72,9 @@
   padding-block-start: 8px;
   padding-block-end: 4px;
   padding-inline: awsui.$space-card-horizontal;
-  &-top-row {
-    @include styles.font-heading-s;
-    display: flex;
-  }
   &-inner {
-    padding-block-start: 4px;
-    inline-size: 100%;
-    display: inline-block;
+    @include styles.font-heading-s;
+    min-block-size: 32px;
   }
 }
 
@@ -95,9 +90,12 @@
   }
 }
 
-.with-actions {
-  > .card-inner > .card-header {
-    inline-size: 90%;
+.with-actions > .card-inner > .header > .header-top-row {
+  display: flex;
+  > .header-inner {
+    inline-size: 100%;
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -117,5 +115,4 @@
 
 .description {
   color: awsui.$color-text-heading-secondary;
-  margin-block-end: 8px;
 }