Molecular Design Patterns

An atomic design system which determines how to render headless data to various front-end content consumers. Below is the logic which drove presentation:

Molecular Rules:

1. Molecules always display these data points:
- Title
- Author Photo
- Byline

2. Molecules contain a minimum of one and a maximum of two of the following atoms:
- Hero media
- Either an image or a video, but probably will
expand to include slideshows too.
- Media will have a max height of 180px and a
minimum height of 70px.
- Products
- Description
- A text description limited to X characters.

3. Molecules favor content in the following priority:
- Hero media
- Products
- Description

So for instance, if there is hero media or products in the article, they will always be displayed. Only if the article is missing either hero media or products will the article description be shown.

4. There are tall and short molecules.
- Tall atoms will present media in a 16:9 ratio.
- Short atoms will limit media height to 140px
and the media will be cropped to the center of
the media.

5. There are three widths of molecules.
Molecule widths are based on the width of the base product atom.

- Thin: two products shown
- Medium: three products shown
- Thick: four products shown