Status – Not allowed

Multiple Status – Not allowed

Stacking

No stacking but .status + .status {margin-top: 8px } allowed

Stacking and .status + .status {margin-left: 4px } allowed

Stacking and .status + .status {margin-left: 8px } allowed

Inline – Not allowed

line-height: inherited – default for Citizen site (body)

line-height: 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct Correct Correct vestibulum non vel justo. Suspendisse potenti. Lorem ipsum dolor sit amet, Correct consectetur adipiscing elit. Maecenas sit amet est urna. Pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor lectus tincidunt, dignissim augue ac, ultrices libero. Quisque a nunc ut magna tempor varius a non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sed lacus quis imperdiet. Duis non risus dolor. Mauris ut elit eu mi porta vehicula quis eu sem. Morbi non consectetur diam, eget scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

line-height: 1 + padding: 4px 6px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

line-height: 1.6 – default for body frontend (html: 1.15)

line-height: 1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct Correct Correct vestibulum non vel justo. Suspendisse potenti. Lorem ipsum dolor sit amet, Correct consectetur adipiscing elit. Maecenas sit amet est urna. Pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor lectus tincidunt, dignissim augue ac, ultrices libero. Quisque a nunc ut magna tempor varius a non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sed lacus quis imperdiet. Duis non risus dolor. Mauris ut elit eu mi porta vehicula quis eu sem. Morbi non consectetur diam, eget scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

line-height: 1 + padding: 4px 6px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

line-height: 1.2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct Correct Correct vestibulum non vel justo. Suspendisse potenti. Lorem ipsum dolor sit amet, Correct consectetur adipiscing elit. Maecenas sit amet est urna. Pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor lectus tincidunt, dignissim augue ac, ultrices libero. Quisque a nunc ut magna tempor varius a non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sed lacus quis imperdiet. Duis non risus dolor. Mauris ut elit eu mi porta vehicula quis eu sem. Morbi non consectetur diam, eget scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

line-height: 1 + padding: 4px 6px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

line-height: 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct Correct Correct vestibulum non vel justo. Suspendisse potenti. Lorem ipsum dolor sit amet, Correct consectetur adipiscing elit. Maecenas sit amet est urna. Pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor lectus tincidunt, dignissim augue ac, ultrices libero. Quisque a nunc ut magna tempor varius a non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sed lacus quis imperdiet. Duis non risus dolor. Mauris ut elit eu mi porta vehicula quis eu sem. Morbi non consectetur diam, eget scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

line-height: 1 + padding: 4px 6px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct.

Misc. Considerations

Note inline version

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor lectus tincidunt, dignissim augue ac, ultrices libero. Quisque a nunc ut magna tempor varius a non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sed lacus quis imperdiet. Duis non risus dolor. Mauris ut elit eu mi porta vehicula quis eu sem. Morbi non consectetur diam, eget scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Margin created by normal space, note the line-height change within the paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct Correct Correct vestibulum non vel justo. Suspendisse potenti. Lorem ipsum dolor sit amet, Correct consectetur adipiscing elit. Maecenas sit amet est urna. Pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor lectus tincidunt, dignissim augue ac, ultrices libero. Quisque a nunc ut magna tempor varius a non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sed lacus quis imperdiet. Duis non risus dolor. Mauris ut elit eu mi porta vehicula quis eu sem. Morbi non consectetur diam, eget scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Note the margin on left on the second if it follows but wraps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct Correct Correct vestibulum non vel justo. Suspendisse potenti. Lorem ipsum dolor sit amet, Correct consectetur adipiscing elit. Maecenas sit amet est urna. Pellentesque tellus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor lectus tincidunt, dignissim augue ac, ultrices libero. Quisque a nunc ut magna tempor varius a non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sed lacus quis imperdiet. Duis non risus dolor. Mauris ut elit eu mi porta vehicula quis eu sem. Morbi non Correct Correct diam, eget scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Multiple words

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct yhuwscd gycd gcxg saugycd vhsab cgd shucv dsycbydseu.

=”status status–green”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec leo a eros solli Correct yhuwscd gycd gcxg saugycd vhsab cgd shucv dsycbydseu.