2 #flower-deconstructed Flower (deconstructed)

The flower component is constructed of several CSS elements. The component can also be applied to a variety of different collections of HTML; the markup below is just one example.

Example
<div class="flower__bed [modifier class]__bed">
  <div class="flower [modifier class]">
    <div class="flower__petals">
      <div class="flower__face"></div>
    </div>
    <div class="flower__stem">
      <div class="flower__leaves"></div>
    </div>
  </div>
</div>

2.1 #flower-deconstructed.base Flower (base element)

The base class name for the component is .flower. To see the CSS that is applied to it, use your browser's DOM inspector.

Note: there's not much CSS here since most styling is on the other elements of the flower component.

Example
<div class="flower"></div>
Example
<div class="flower__face"></div>
Examples
Default styling
.flower--tulip
The tulip variation causes the .flower__petals to display differently.
<div class="[modifier class]">
  <div class="flower__petals"></div>
</div>
Example
<div class="flower__stem"></div>
Example
<div class="flower__leaves"></div>
Example
<div class="flower__bed"></div>