diff --git a/docs/components/label.md b/docs/components/label.md index 05cf2fe81d..ae36a8fd45 100644 --- a/docs/components/label.md +++ b/docs/components/label.md @@ -1,40 +1,37 @@ -
-

Labels

+--- +layout: page +title: Labels +--- -

Example

-
-

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-
-{% highlight html %} +Small and adaptive tag for adding context to just about any content. + +### Example + +Labels scale to match the size of the immediate parent element by using relative font sizing and `em` units. + +{% example html %} +

Example heading New

+

Example heading New

Example heading New

-{% endhighlight %} +

Example heading New

+
Example heading New
+
Example heading New
+{% endexample %} -

Available variations

-

Add any of the below mentioned modifier classes to change the appearance of a label.

-
- Default - Primary - Success - Info - Warning - Danger -
-{% highlight html %} +### Contextual variations + +Add any of the below mentioned modifier classes to change the appearance of a label. + +{% example html %} Default Primary Success Info Warning Danger -{% endhighlight %} +{% endexample %} -
-

Have tons of labels?

-

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.

-
+
+

Have tons of labels?

+

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.