fix(image-card): move subtitle to top left corner (#866)

* v1.17.2 * v1.17.3 * fix(image-card): update subtitle to top left * fix: remove new classname Co-authored-by: Vince Picone <vpicone@gmail.com>
carbon-design-system · Jun 22, 2020 · 4c453fc · 4c453fc · vercel · Jun 22, 2020
1 parent 38a9a2b
commit 4c453fc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/packages/example/src/pages/components/ImageCard.mdx b/packages/example/src/pages/components/ImageCard.mdx
@@ -15,7 +15,6 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
 <Column colMd={4} colLg={4} noGutterSm>
     <ImageCard
       title="Title"
-      subTitle="Subtitle"
       href="/"
       >
 
@@ -28,8 +27,8 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
       aspectRatio="1:1"
       href="/"
       actionIcon="arrowRight"
-      subTitleColor="light"
-      subTitle="Light subtitle"
+      subTitleColor="dark"
+      subTitle="Dark subtitle"
       >
 
 ![Light dark](./images/light-dark.jpg)
@@ -63,11 +62,13 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
   </ImageCard>
       <ImageCard
       disabled
+      title="Title"
+      subTitle="Subtitle"
       aspectRatio="1:1"
       href="/"
       >
 
-![Square](/images/square.jpg)
+![IBM Cloud Server](/images/IBM_Cloud_Server.png)
 
   </ImageCard>
 </Column>
@@ -87,8 +88,8 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
       aspectRatio="1:1"
       href="/"
       actionIcon="arrowRight"
-      subTitleColor="light"
-      subTitle="Light subtitle"
+      subTitleColor="dark"
+      subTitle="Dark subtitle"
     >
       ![Light dark](./images/light-dark.jpg)
     </ImageCard>
@@ -124,7 +125,7 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
 | children      | node     |          |         | Background image for the card, make sure it is saved out at the correct aspect ratio or it will appear distorted |
 | href          | string   |          |         | Set url for card                                                                                                 |
 | aspectRatio   | string   |          | `1:1`   | Set card aspect ratio, default is `1:1`, options are `1:1`, `16:9`, `4:3`, `2:1`, `1:2`                          |
-| subTitle      | string   |          |         | Smaller title in bottom left of card                                                                             |
+| subTitle      | string   |          |         | Smaller title on top left of card                                                                                |
 | title         | string   |          |         | Large title                                                                                                      |
 | actionIcon    | string   |          |         | Action icon, default is no icon, options are `Launch`, `ArrowRight`, `Download`, `Disabled`, `Email`             |
 | titleColor    | string   |          | `light` | Set title text color, default is `light`, options are `light` or `dark`                                          |

diff --git a/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js b/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js
@@ -68,8 +68,8 @@ export default class ImageCard extends React.Component {
 
     const cardContent = (
       <>
-        {title ? <h4 className={titleClassNames}>{title}</h4> : null}
         {subTitle ? <h5 className={subTitleClassNames}>{subTitle}</h5> : null}
+        {title ? <h4 className={titleClassNames}>{title}</h4> : null}
         <div className={iconClassNames}>
           {actionIcon === 'launch' && !disabled ? (
             <Launch20 aria-label="Open resource" />

diff --git a/packages/gatsby-theme-carbon/src/components/ImageCard/image-card.scss b/packages/gatsby-theme-carbon/src/components/ImageCard/image-card.scss
@@ -43,9 +43,9 @@
   font-weight: 400;
   text-decoration: none;
   color: $text-04;
-  position: absolute;
-  bottom: 1rem;
-  left: 1rem;
+  position: relative;
+  top: 0;
+  left: 0;
   z-index: 1;
 }