diff --git a/gatsby-config.js b/gatsby-config.js
index 19b61677333..4db646f2117 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -49,6 +49,7 @@ module.exports = {
baseUrl: 'https://github.com/carbon-design-system/carbon-website',
subDirectory: '',
},
+ mediumAccount: 'carbondesign',
},
},
{
diff --git a/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.js b/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.js
new file mode 100644
index 00000000000..28c704f4e53
--- /dev/null
+++ b/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import PropTypes from 'prop-types';
+import { Column, Row } from 'gatsby-theme-carbon/src/components/Grid';
+import ArticleCard from 'gatsby-theme-carbon/src/components/ArticleCard';
+import { image, cardContainer } from './MediumPosts.module.scss';
+
+const MediumPosts = ({
+ postLimit = 3,
+ cardProps,
+ color = 'white',
+ ...rest
+}) => {
+ const data = useStaticQuery(graphql`
+ query {
+ allMediumFeed(sort: { fields: date, order: DESC }, limit: 10) {
+ edges {
+ node {
+ author
+ date(formatString: "MMMM Do, YYYY")
+ slug
+ thumbnail
+ title
+ link
+ }
+ }
+ }
+ }
+ `);
+
+ const allPosts = data.allMediumFeed.edges.map(({ node }) => node);
+
+ return (
+
+ {allPosts.slice(0, postLimit).map((latestPost, i) => (
+
+
+ 
+
+
+ ))}
+
+ );
+};
+
+MediumPosts.propTypes = {
+ cardProps: PropTypes.object,
+ postLimit: PropTypes.number,
+};
+
+export default MediumPosts;
diff --git a/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.module.scss b/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.module.scss
new file mode 100644
index 00000000000..bbcb3959cf7
--- /dev/null
+++ b/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.module.scss
@@ -0,0 +1,57 @@
+// Fixes the gutter of the article cards on the homepage
+.card-container {
+ padding-right: 0;
+ padding-left: 0;
+ @include carbon--breakpoint('md') {
+ padding-right: 1rem;
+ padding-left: 1rem;
+ }
+}
+
+// Fixs the breaking type
+
+.card-container h4 {
+ @include carbon--breakpoint('sm') {
+ @include carbon--type-style('productive-heading-03');
+ }
+
+ @include carbon--breakpoint('md') {
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.2rem;
+ letter-spacing: 0;
+ }
+
+ @include carbon--breakpoint('lg') {
+ font-size: 0.75rem;
+ font-weight: 400;
+ line-height: 1rem;
+ letter-spacing: 0;
+ }
+ @include carbon--breakpoint('xlg') {
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.375rem;
+ letter-spacing: 0;
+ }
+}
+
+// Images pulled from the Medium RSS feed are different sizes and aspect ratios. This will make the cards different sizes. The class below fixes that issue.
+
+.image {
+ object-fit: cover;
+ width: 100%;
+
+ @include carbon--breakpoint('sm') {
+ height: 315px;
+ }
+ @include carbon--breakpoint('md') {
+ height: 290px;
+ }
+ @include carbon--breakpoint('lg') {
+ height: 165px;
+ }
+ @include carbon--breakpoint('xlg') {
+ height: 215px;
+ }
+}
diff --git a/src/gatsby-theme-carbon/components/MediumPosts/index.js b/src/gatsby-theme-carbon/components/MediumPosts/index.js
new file mode 100644
index 00000000000..22a8e56fbd2
--- /dev/null
+++ b/src/gatsby-theme-carbon/components/MediumPosts/index.js
@@ -0,0 +1,3 @@
+import MediumPosts from './MediumPosts';
+
+export default MediumPosts;
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 6ebbf792fb2..054853f7bc7 100755
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -126,47 +126,4 @@ building websites and user interfaces.
### Latest news and articles
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/pages/whats-happening/news-and-articles/index.mdx b/src/pages/whats-happening/news-and-articles/index.mdx
index 29b42a1b5fb..b4dc6f5e2a9 100644
--- a/src/pages/whats-happening/news-and-articles/index.mdx
+++ b/src/pages/whats-happening/news-and-articles/index.mdx
@@ -19,321 +19,7 @@ about design systems.
## Latest news
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
## Books and articles