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>

2.2 #flower-deconstructed.face Flower face

The .flower__face element.

Example

<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.

<div class="[modifier class]">
  <div class="flower__petals"></div>
</div>

2.4 #flower-deconstructed.stem Flower stem

The .flower__stem element.

Example

<div class="flower__stem"></div>

2.5 #flower-deconstructed.leaves Flower leaves

The .flower__leaves element.

Example

<div class="flower__leaves"></div>

2.6 #flower-deconstructed.bed Flower bed

The .flower__bed element.

Example

<div class="flower__bed"></div>