From 1528516dd6fc886322ee2f7822a8bdb7b74e966e Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Mon, 16 Jan 2017 00:45:04 -0500 Subject: Add doc example with badge links (#21674) --- docs/components/badge.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'docs/components/badge.md') diff --git a/docs/components/badge.md b/docs/components/badge.md index 4e4bafcde..896c917f3 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -53,3 +53,16 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger Warning Danger {% endexample %} + +## Links + +Using the `.badge` classes with the `` element quickly provide _actionable_ badges with hover and focus states. + +{% example html %} +Default +Primary +Success +Info +Warning +Danger +{% endexample %} -- cgit v1.2.3 From c10200267b93b6a2c84873f988583c32a3a4b5a6 Mon Sep 17 00:00:00 2001 From: Alex Neises Date: Thu, 2 Mar 2017 18:32:21 -0600 Subject: Fixed spelling error. (#22102) --- docs/components/badge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/badge.md') diff --git a/docs/components/badge.md b/docs/components/badge.md index 896c917f3..a7497a285 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -1,7 +1,7 @@ --- layout: docs title: Badges -description: Documentation and examples for badges, our small count and labelling component. +description: Documentation and examples for badges, our small count and labeling component. group: components --- -- cgit v1.2.3 From c72cc98bd56fb50259c84a1fced38751009eb930 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 23:01:14 -0700 Subject: update components docs --- docs/components/badge.md | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) (limited to 'docs/components/badge.md') diff --git a/docs/components/badge.md b/docs/components/badge.md index a7497a285..764e5a1cb 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -3,27 +3,30 @@ layout: docs title: Badges description: Documentation and examples for badges, our small count and labeling component. group: components +toc: true --- -Small and adaptive tag for adding context to just about any content. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Example Badges 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
+
Example heading New
+
Example heading New
+
Example heading New
+
+ +{% highlight html %}

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
-{% endexample %} +{% endhighlight %} ## Contextual variations -- cgit v1.2.3 From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/components/badge.md | 71 ------------------------------------------------ 1 file changed, 71 deletions(-) delete mode 100644 docs/components/badge.md (limited to 'docs/components/badge.md') diff --git a/docs/components/badge.md b/docs/components/badge.md deleted file mode 100644 index 764e5a1cb..000000000 --- a/docs/components/badge.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: docs -title: Badges -description: Documentation and examples for badges, our small count and labeling component. -group: components -toc: true ---- - -## Example - -Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. - -
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
- -{% highlight html %} -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-{% endhighlight %} - -## Contextual variations - -Add any of the below mentioned modifier classes to change the appearance of a badge. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} - -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} - -## Pill badges - -Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} - -## Links - -Using the `.badge` classes with the `` element quickly provide _actionable_ badges with hover and focus states. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} -- cgit v1.2.3