Section with three columns

[michaelmccombie]

Variations

• Text can be either center or left-aligned
• Background color should be interchangeable

Desktop (1024px)

Mobile (480px)

[michaelmccombie]

We might be able to leverage the card component styling. The cards currently use Zilla-Slab for the headlines but if the page has a Firefox theme class applied to it then the headlines should change to Open-Sans.

Something along these lines:

<section class="mzp-c-card">
  <div class="mzp-c-card-content">

      /* Insert Icon Markup */

      <h2 class="mzp-c-card-title">This example headline has 40 characters</h2>
      <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
    </div>
</section>

[alexgibson]

We might be able to leverage the card component styling.

Whilst re-using existing components is definitely a good thing and something we should always consider, there are a few differences here that Card components don't currently cover:

• Card components currently expect an image of a certain aspect ratio. The Icons for this component are largely presentational however, so they may be better suited as CSS background images. We may also want to sprite the icons for better performance.
• For Three-Up-Left at smaller screen sizes the icons left align to the text, which is something unique to this component. So far, card components don't have to think about their own layout.
• Card-layout classes typically expect Cards to come in blocks of 6 to avoid stragglers at medium viewport sizes. This compnent will likely need its own layout class that only has breakpoints at small & large viewport sizes to avoid the same behavior.

Whilst I'm not saying that leveraging existing Card styles is something we should avoid, we do still need to consider how complex a component with a single responsibility should get. The more variations we add to it, the more complicated it becomes.

[alexgibson]

What I think I've settled on here is to make this a new variation of a card component as @michaelmccombie suggested. Because it shares little in common with a regular card however, it's likely not going to inherit all the base styles from a regular card, and instead use a base class of its own (e.g. mzp-c-card-icon) to avoid overriding properties it doesn't need.

For layout, we can still use mzp-l-card-third and mzp-l-layout-card-half, but those layout classes can have some specific rules for mzp-c-card-icon child components.