fix: update feature-card styles

carbon-design-system · May 30, 2019 · b70e38f · b70e38f
1 parent a4c216f
commit b70e38f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git a/packages/example/src/pages/components/FeatureCard.mdx b/packages/example/src/pages/components/FeatureCard.mdx
@@ -24,6 +24,18 @@ The `<FeatureCard>` component takes the same props as the `<ResourceCard>` compo
 
 </FeatureCard>
 
+<FeatureCard
+  subTitle="With subtitle"
+  title="Title"
+  actionIcon="arrowRight"
+  href="/"
+  color="dark"
+  >
+
+![smart work](/images/smart-work.png)
+
+</FeatureCard>
+
 ## Code
 
 ```

diff --git a/packages/example/src/pages/components/images/smart-work.png b/packages/example/src/pages/components/images/smart-work.png
diff --git a/packages/gatsby-theme-carbon/gatsby-config.js b/packages/gatsby-theme-carbon/gatsby-config.js
@@ -54,9 +54,9 @@ module.exports = themeOptions => {
             {
               resolve: `gatsby-remark-images`,
               options: {
-                maxWidth: 1184,
+                maxWidth: 1170,
                 linkImagesToOriginal: false,
-                tracedSVG: true,
+                quality: 75,
               },
             },
             { resolve: `gatsby-remark-responsive-iframe` },

diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js b/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Link } from 'gatsby';
+import { settings } from 'carbon-components';
 import { Row, Column } from '../Grid';
 import ResourceCard from '../ResourceCard';
-import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 

diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
@@ -21,10 +21,7 @@
 
 .#{$prefix}--feature-card__img {
   position: relative;
-  margin-left: -1px;
-  margin-right: -1px;
 }
-
 .#{$prefix}--feature-card:hover
   .#{$prefix}--feature-card__link
   .#{$prefix}--tile {
@@ -70,6 +67,7 @@
     width: auto !important;
     left: auto !important;
     right: 0;
+    object-fit: cover;
   }
 }