Skip to content

Conversation

@dromo77
Copy link
Contributor

@dromo77 dromo77 commented Jul 13, 2021

Overview

This PR adds a Featured Row object. The pattern provides a layout for 3 main areas, a heading, content, and and optional cta.

Screenshots

Screen Shot 2021-07-13 at 10 13 23 AM
Screen Shot 2021-07-13 at 10 19 10 AM


@dromo77 dromo77 requested a review from tylersticka July 13, 2021 17:34
@changeset-bot
Copy link

changeset-bot bot commented Jul 13, 2021

🦋 Changeset detected

Latest commit: d6461c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudfour/patterns Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@dromo77
Copy link
Contributor Author

dromo77 commented Jul 13, 2021

Thanks @tylersticka! I made a few changes 🙂

  • Changed o-featured-row__heading to o-featured-row__intro
  • Updated the CSS so it uses grid-template-areas
  • Fixed the indentation

@dromo77 dromo77 changed the title Add Featured Row object Add Feature Group object Jul 13, 2021
Co-authored-by: Gerardo Rodriguez <gerardo@cloudfour.com>
Copy link
Member

@tylersticka tylersticka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dromo77 I think you may also need to reduce or remove the grid-row-gap at larger sizes? I'm noticing that the gap is pushing the action down pretty low:

Screen Shot 2021-07-14 at 11 30 07 AM

Here it is with grid-row-gap: 0 added at larger breakpoints:

Screen Shot 2021-07-14 at 11 30 13 AM

@dromo77
Copy link
Contributor Author

dromo77 commented Jul 14, 2021

I'm noticing that the gap is pushing the action down pretty low

@tylersticka I noticed that as well, this seems like a good solution!

import defaultDemoSource from '!!raw-loader!./demo/demo.twig';
import defaultDemo from './demo/demo.twig';

<Meta title="Objects/Feature Group" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this pattern depends on media queries, you should add parameters={{ docs: { inlineStories: false } }} to this Meta element. This will cause the stories to display in an iframe in Docs view.

Copy link
Member

@tylersticka tylersticka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@dromo77 dromo77 merged commit a07d5b0 into v-next Jul 14, 2021
@dromo77 dromo77 deleted the featured-row branch July 14, 2021 21:34
@github-actions github-actions bot mentioned this pull request Jul 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Featured row pattern

4 participants