Pattern Submission: Team Social Cards

justintadlock commented 3 years ago

Team/Company member sections are pretty common. This pattern uses the Columns block to create a four-column group of team cards with avatars and social links.

Notes: Either Twenty Twenty-One or Gutenberg is overriding the social icon color on the front end. In the editor, they are white (as they should be), but on the front end, they are black.

I could also probably find a better default image, but the giraffe might just be fine too. Not sure about including photos of real people (even under CC0) and whether we need an additional model release for such things.

Pattern Title

Team Social Cards

Pattern Categories

Columns

Screenshots

screenshot

Image Credits

Public Domain / CC0 Images:

https://www.rawpixel.com/image/422033/free-photo-image-animal-giraffe-texas

Block Markup

https://github.com/justintadlock/wporg-patterns/blob/master/columns-team-social-cards/pattern.html

beafialho commented 3 years ago

Love the giraffe! :grin: Not sure it fits this context in particular. A couple suggestions:

Have you considered naming each card with a real name? So, instead of "Person Name" use "John Doe" and instead of "Team Role", perhaps "Team Manager", to make the pattern look more real.
I also suggest replacing the giraffe with real people's photos, for the same reason mentioned above.

kjellr commented 3 years ago

Here's a suggested edit, taking @beafialho's suggestions into account:

I tried pulling some portraits from art, so that we don't have to worry about actual photos of people. I only found a decent set of three, so I trimmed this down into just three columns.
I changed the name to be more real.
I took a couple other liberties with the design: I changed the colors a bit to match the new images, moved the person's name and description out into a paragraph so we can style it a little more (in some themes, an image caption may enforce some weird styles for captions), and updated the social icon colors to match the text for a more considered appearance.

Here's how it turned out:

Markup for all this is here:

https://gist.github.com/kjellr/d58e732719d5336fbddf81f1a3070505

Let me know what you folks think!

Image Credits:

Portrait of a Woman (1910) by Egon Schiele. Public Domain. https://www.rawpixel.com/image/2681051/free-illustration-image-egon-schiele-portrait-schiele

Portrait of a Woman (1910) by Egon Schiele. Public Domain. https://www.rawpixel.com/image/2680516/free-illustration-image-art-line-art-vintage

Portrait of a Woman (1910) by Egon Schiele. Public Domain. https://www.rawpixel.com/image/2681051/free-illustration-image-egon-schiele-portrait-schiele

justintadlock commented 3 years ago

I like the changes. Great work! Moving the text out into a paragraph also fixes the spacing issue I was having with using it in a caption.

melchoyce commented 3 years ago

This looks great, y'all nailed it. I think it's good to move over to the directory now 👍

kjellr commented 3 years ago

This one is live! Thanks for contributing! https://wordpress.org/patterns/pattern/team-social-cards/

It looks like there's a bug that's not displaying the social links, so I'll keep the issue open to track that.

justintadlock commented 3 years ago

Also, I figured out the icon color issue in the OP.

When setting the Link Color for the Column block, WP/GB adds a <style> tag that targets .wp-elements-xxxx a { color: var( --wp--preset--color--black ) !important; }, which overrides social icon text colors.

It's noticable on the front-end but not the editor.

That might need to be addressed upstream.

kjellr commented 3 years ago

Since some of the display issues appear to span across multiple patterns, I've opened a single issue to track them. I'll close this issue as resolved.

https://github.com/WordPress/pattern-directory/issues/156

WordPress / pattern-directory