Labels | Romo

Default labels

Label styles can be applied to anything with the .romo-label class.

Label

<span class="romo-label">...</span>

Label sizes

Use numbered style classes to size up/down labels.

.romo-label .romo-label0 .romo-label-small

.romo-label .romo-label1

.romo-label .romo-label2 .romo-label-large

.romo-label .romo-label3

<div class="romo-push0-bottom">
  <span class="romo-label">...</span>
  <span class="romo-label romo-label0">...</span>
  <span class="romo-label romo-label-small">...</span>
</div>
<div class="romo-push0-bottom">
  <span class="romo-label">...</span>
  <span class="romo-label romo-label1">...</span>
</div>
<div class="romo-push0-bottom">
  <span class="romo-label">...</span>
  <span class="romo-label romo-label2">...</span>
  <span class="romo-label romo-label-large">...</span>
</div>
<div class="romo-push0-bottom">
  <span class="romo-label">...</span>
  <span class="romo-label romo-label3">...</span>
</div>

Use to align with inline text.

.romo-text0 .romo-label0 .romo-text-small .romo-label-small

.romo-text1 .romo-label1 .romo-text .romo-label

.romo-text2 .romo-label2 .romo-text-large .romo-label-large

.romo-text3 .romo-label3

<div class="romo-push0-bottom">
  <span class="romo-text0 romo-align-middle">.romo-text0</span>
  <span class="romo-label romo-label0">.romo-label0</span>
  <span class="romo-text-small romo-align-middle">.romo-text-small</span>
  <span class="romo-label romo-label-small">.romo-label-small</span>
</div>
<div class="romo-push0-bottom">
  <span class="romo-text1 romo-align-middle">.romo-text1</span>
  <span class="romo-label romo-label1">.romo-label1</span>
  <span class="romo-text romo-align-middle">.romo-text</span>
  <span class="romo-label">.romo-label</span>
</div>
<div class="romo-push0-bottom">
  <span class="romo-text2 romo-align-middle">.romo-text2</span>
  <span class="romo-label romo-label2">.romo-label2</span>
  <span class="romo-text-large romo-align-middle">.romo-text-large</span>
  <span class="romo-label romo-label-large">.romo-label-large</span>
</div>
<div class="romo-push0-bottom">
  <span class="romo-text3 romo-align-middle">.romo-text3</span>
  <span class="romo-label romo-label3">.romo-label3</span>
</div>

Or use .romo-label-inline to manually vertically align text that isn’t inline with an image.

.romo-label-large

.romo-text-small

<div class="romo-row romo-push0-bottom">
  <div class="romo-span romo-3-12 romo-align-right romo-pad0-right">
    <span class="romo-label romo-label-large">.romo-label-large</span>
  </div>
  <div class="romo-span romo-2-12 romo-text-small">
    <span class="romo-label-inline-large">.romo-text-small</span>
  </div>
  <div class="romo-span romo-offset-7-12"></div>
</div>

Use .romo-label-block to add blocking full-width labels.

Blocking full-width label

<span class="romo-label romo-label-block">...</span>

Alternate labels

Use these as an alternative to the default styles and to add color emphasis to labels.

Large size	Default size	Small size	class=""
Default	Default	Default	`romo-label`
Alt	Alt	Alt	`romo-label romo-label-alt`
Primary	Primary	Primary	`romo-label romo-label-primary`
Warning	Warning	Warning	`romo-label romo-label-warning`
Danger	Danger	Danger	`romo-label romo-label-danger` Or, `romo-label romo-label-error`
Info	Info	Info	`romo-label romo-label-info`
Success	Success	Success	`romo-label romo-label-success`
Inverse	Inverse	Inverse	`romo-label romo-label-inverse`