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 
  1. <div class="flower__bed [modifier class]__bed">
  2.   <div class="flower [modifier class]">
  3.     <div class="flower__petals">
  4.       <div class="flower__face"></div>
  5.     </div>
  6.     <div class="flower__stem">
  7.       <div class="flower__leaves"></div>
  8.     </div>
  9.   </div>
  10. </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 
  1. <div class="flower"></div>

2.2 #flower-deconstructed.face Flower face

The .flower__face element.

Example 
  1. <div class="flower__face"></div>

2.3 #flower-deconstructed.petals Flower petals

The .flower__petals element.

Examples
Default styling
.flower--tulip
The tulip variation causes the .flower__petals to display differently. 
  1. <div class="[modifier class]">
  2.   <div class="flower__petals"></div>
  3. </div>

2.4 #flower-deconstructed.stem Flower stem

The .flower__stem element.

Example 
  1. <div class="flower__stem"></div>

2.5 #flower-deconstructed.leaves Flower leaves

The .flower__leaves element.

Example 
  1. <div class="flower__leaves"></div>

2.6 #flower-deconstructed.bed Flower bed

The .flower__bed element.

Example 
  1. <div class="flower__bed"></div>