{"componentChunkName":"component---src-templates-blog-single-js","path":"/festured-posts-layout-examples-with-cssgrid/","result":{"data":{"mdx":{"id":"7dbbb801-8f22-5868-a12b-aa9f069dba1e","excerpt":"Last week I worked on these two examples of featured content type components.  The main goal was to build a \"modern looking\" area where some elements inside the…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Featured Posts layout examples with CSS Grid\",\n  \"date\": \"2020-04-12T13:00:00\",\n  \"description\": \"Examples os some layout ideas for a Featured Content component. Using CSS Grid.\",\n  \"path\": \"/featured-posts-layout-examples-with-cssgrid\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar CodePen = makeShortcode(\"CodePen\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Last week I worked on these two examples of featured content type components. \"), mdx(\"p\", null, \"The main goal was to build a \\\"modern looking\\\" area where some elements inside the component, such as the article title, the description or the image are positioned like I see in magazines or other classical printed media.\"), mdx(\"p\", null, \"I did not want to use absolute positioning, and lots of extra divs to make it look like I had in mind. The less markup, the better. But not just for simplicity, or cleaness, also because of semantics.\"), mdx(\"h2\", null, \"Basic example\"), mdx(CodePen, {\n    codePenId: \"eYNwrYM\",\n    mdxType: \"CodePen\"\n  }), mdx(\"h2\", null, \"Another example\"), mdx(CodePen, {\n    codePenId: \"WNvVgzO\",\n    mdxType: \"CodePen\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Featured Posts layout examples with CSS Grid","date":"April 12, 2020","description":"Examples os some layout ideas for a Featured Content component. Using CSS Grid.","path":"/featured-posts-layout-examples-with-cssgrid"}}},"pageContext":{"slug":"/festured-posts-layout-examples-with-cssgrid/","previous":{"fields":{"slug":"/challenge-summary-weeks-2-3/"},"frontmatter":{"path":"/challenge-summary-weeks-2-3","title":"Challenge Summary for weeks 2 and 3"}},"next":null}}}