From c0eab6ba0cce1288b28c358c81ff1492e94eb311 Mon Sep 17 00:00:00 2001 From: Jennifer Giardino Date: Mon, 31 Oct 2016 13:48:24 -0400 Subject: [PATCH 1/5] Included component for an icon with a circle around it, in small, medium and large sizes. --- .../basics/03-icons/00-icon-circle.hbs | 3 +++ .../basics/03-icons/00-icon-circle.md | 16 +++++++++++++++ source/_patterns/basics/03-icons/00-icon.hbs | 2 +- source/scss/_pf-basic-icons.scss | 20 +++++++++++++++++++ 4 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 source/_patterns/basics/03-icons/00-icon-circle.hbs create mode 100644 source/_patterns/basics/03-icons/00-icon-circle.md diff --git a/source/_patterns/basics/03-icons/00-icon-circle.hbs b/source/_patterns/basics/03-icons/00-icon-circle.hbs new file mode 100644 index 00000000..cbffa815 --- /dev/null +++ b/source/_patterns/basics/03-icons/00-icon-circle.hbs @@ -0,0 +1,3 @@ +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-sm" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-md" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-lg" }} diff --git a/source/_patterns/basics/03-icons/00-icon-circle.md b/source/_patterns/basics/03-icons/00-icon-circle.md new file mode 100644 index 00000000..fc733d8a --- /dev/null +++ b/source/_patterns/basics/03-icons/00-icon-circle.md @@ -0,0 +1,16 @@ +--- +title: PatternFly Icon with Circle Decorator +--- + +## Overview + +Some PatternFly patterns display an icon with a circle arount it. For example, in the [list view](http://www.patternfly.org/pattern-library/content-views/list-view/#/api) or [card view](http://www.patternfly.org/pattern-library/content-views/card-view/#/api). + + +## Usage + +| Class | Usage | +| -- | -- | +| `.pficon-circle-sm` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a small icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pficon-circle-md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pficon-circle-lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a small icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | diff --git a/source/_patterns/basics/03-icons/00-icon.hbs b/source/_patterns/basics/03-icons/00-icon.hbs index 6d384caf..3705957b 100644 --- a/source/_patterns/basics/03-icons/00-icon.hbs +++ b/source/_patterns/basics/03-icons/00-icon.hbs @@ -1 +1 @@ - + diff --git a/source/scss/_pf-basic-icons.scss b/source/scss/_pf-basic-icons.scss index ee93ea40..88b4874b 100644 --- a/source/scss/_pf-basic-icons.scss +++ b/source/scss/_pf-basic-icons.scss @@ -219,3 +219,23 @@ .#{$pf-icon-prefix}-zone:before { content: $pficon-var-zone; } + +@mixin pficon-circle($width-height, $font-size, $line-height) { + width: $width-height; + height: $width-height; + font-size: $font-size; + line-height: $line-height; + text-align: center; + border: 2px solid $color-pf-blue-300; + border-radius: 50%; +} +// line-height value should be 4px less than width-height value to accommodate 2px border on each side +.pficon-circle-lg { + @include pficon-circle(106px, 46px, 102px); +} +.pficon-circle-md { + @include pficon-circle(54px, 23px, 50px); +} +.pficon-circle-sm { + @include pficon-circle(calc(2rem + 4px), $font-size-relative-base, 2rem); +} From 18810816ce9874abc882561916d351664f8e1041 Mon Sep 17 00:00:00 2001 From: Jennifer Giardino Date: Mon, 31 Oct 2016 14:56:24 -0400 Subject: [PATCH 2/5] updated values defined for circle icon --- .../basics/03-icons/00-icon-circle.hbs | 6 ++--- .../basics/03-icons/00-icon-circle.md | 6 ++--- source/scss/_pf-basic-icons.scss | 27 ++++++------------- source/scss/_pf-basic-mixins.scss | 12 +++++++++ source/scss/_pf-basic-variables.scss | 3 +++ 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/source/_patterns/basics/03-icons/00-icon-circle.hbs b/source/_patterns/basics/03-icons/00-icon-circle.hbs index cbffa815..00222cd8 100644 --- a/source/_patterns/basics/03-icons/00-icon-circle.hbs +++ b/source/_patterns/basics/03-icons/00-icon-circle.hbs @@ -1,3 +1,3 @@ -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-sm" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-md" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-lg" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-base" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-md" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-lg" }} diff --git a/source/_patterns/basics/03-icons/00-icon-circle.md b/source/_patterns/basics/03-icons/00-icon-circle.md index fc733d8a..58f9c46b 100644 --- a/source/_patterns/basics/03-icons/00-icon-circle.md +++ b/source/_patterns/basics/03-icons/00-icon-circle.md @@ -11,6 +11,6 @@ Some PatternFly patterns display an icon with a circle arount it. For example, i | Class | Usage | | -- | -- | -| `.pficon-circle-sm` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a small icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pficon-circle-md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pficon-circle-lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a small icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon-circle-base` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays an icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon-circle-md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon-circle-lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a small icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | diff --git a/source/scss/_pf-basic-icons.scss b/source/scss/_pf-basic-icons.scss index 88b4874b..3b786e77 100644 --- a/source/scss/_pf-basic-icons.scss +++ b/source/scss/_pf-basic-icons.scss @@ -219,23 +219,12 @@ .#{$pf-icon-prefix}-zone:before { content: $pficon-var-zone; } - -@mixin pficon-circle($width-height, $font-size, $line-height) { - width: $width-height; - height: $width-height; - font-size: $font-size; - line-height: $line-height; - text-align: center; - border: 2px solid $color-pf-blue-300; - border-radius: 50%; -} -// line-height value should be 4px less than width-height value to accommodate 2px border on each side -.pficon-circle-lg { - @include pficon-circle(106px, 46px, 102px); -} -.pficon-circle-md { - @include pficon-circle(54px, 23px, 50px); -} -.pficon-circle-sm { - @include pficon-circle(calc(2rem + 4px), $font-size-relative-base, 2rem); +.pf-icon-circle-lg { + @include pf-icon-circle($icon-size-lg); +} +.pf-icon-circle-md { + @include pf-icon-circle($icon-size-md); +} +.pf-icon-circle-base { + @include pf-icon-circle($font-size-relative-base); } diff --git a/source/scss/_pf-basic-mixins.scss b/source/scss/_pf-basic-mixins.scss index 5d20e528..8d9ee30b 100644 --- a/source/scss/_pf-basic-mixins.scss +++ b/source/scss/_pf-basic-mixins.scss @@ -65,3 +65,15 @@ } } } +// Display circle around the icon +@mixin pf-icon-circle($font-size) { + width: calc(2em + 4px); + height: calc(2em + 4px); + font-size: $font-size; + line-height: 2em; + text-align: center; + border: 2px solid $color-pf-blue-300; + border-radius: 50%; +} +// width/height value should be 4px (i.e. 2 x border-width) greater than +// line-height value to accommodate 2px border on each side diff --git a/source/scss/_pf-basic-variables.scss b/source/scss/_pf-basic-variables.scss index d263252b..bdafa8f8 100644 --- a/source/scss/_pf-basic-variables.scss +++ b/source/scss/_pf-basic-variables.scss @@ -261,6 +261,9 @@ $line-height-base: 1.66666667; $headings-font-weight: $pf-font-weight-bold; +$icon-size-lg: 3.3rem; +$icon-size-md: 1.75rem; + // Overwrites default border radius // From 2ebd9d314af4daff4f95fc5f60661f00e779e52e Mon Sep 17 00:00:00 2001 From: Jennifer Giardino Date: Tue, 1 Nov 2016 13:17:43 -0400 Subject: [PATCH 3/5] Updating css classes to separate icon circle from icon size. --- .../basics/03-icons/00-icon-circle.md | 16 ------------ source/_patterns/basics/03-icons/00-icon.hbs | 2 +- ...{00-icon-circle.hbs => 01-icon-circle.hbs} | 6 ++--- .../basics/03-icons/01-icon-circle.md | 16 ++++++++++++ source/scss/_pf-basic-icons.scss | 25 +++++++++++++------ source/scss/_pf-basic-mixins.scss | 12 --------- 6 files changed, 37 insertions(+), 40 deletions(-) delete mode 100644 source/_patterns/basics/03-icons/00-icon-circle.md rename source/_patterns/basics/03-icons/{00-icon-circle.hbs => 01-icon-circle.hbs} (59%) create mode 100644 source/_patterns/basics/03-icons/01-icon-circle.md diff --git a/source/_patterns/basics/03-icons/00-icon-circle.md b/source/_patterns/basics/03-icons/00-icon-circle.md deleted file mode 100644 index 58f9c46b..00000000 --- a/source/_patterns/basics/03-icons/00-icon-circle.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: PatternFly Icon with Circle Decorator ---- - -## Overview - -Some PatternFly patterns display an icon with a circle arount it. For example, in the [list view](http://www.patternfly.org/pattern-library/content-views/list-view/#/api) or [card view](http://www.patternfly.org/pattern-library/content-views/card-view/#/api). - - -## Usage - -| Class | Usage | -| -- | -- | -| `.pf-icon-circle-base` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays an icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pf-icon-circle-md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pf-icon-circle-lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a small icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | diff --git a/source/_patterns/basics/03-icons/00-icon.hbs b/source/_patterns/basics/03-icons/00-icon.hbs index 3705957b..0f4e7d5c 100644 --- a/source/_patterns/basics/03-icons/00-icon.hbs +++ b/source/_patterns/basics/03-icons/00-icon.hbs @@ -1 +1 @@ - + diff --git a/source/_patterns/basics/03-icons/00-icon-circle.hbs b/source/_patterns/basics/03-icons/01-icon-circle.hbs similarity index 59% rename from source/_patterns/basics/03-icons/00-icon-circle.hbs rename to source/_patterns/basics/03-icons/01-icon-circle.hbs index 00222cd8..98592a5d 100644 --- a/source/_patterns/basics/03-icons/00-icon-circle.hbs +++ b/source/_patterns/basics/03-icons/01-icon-circle.hbs @@ -1,3 +1,3 @@ -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-base" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-md" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-lg" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--md" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--lg" }} diff --git a/source/_patterns/basics/03-icons/01-icon-circle.md b/source/_patterns/basics/03-icons/01-icon-circle.md new file mode 100644 index 00000000..a2cefeeb --- /dev/null +++ b/source/_patterns/basics/03-icons/01-icon-circle.md @@ -0,0 +1,16 @@ +--- +title: PatternFly Icon with Circle Decorator +--- + +## Overview + +Some PatternFly patterns display an icon with a circle arount it. For example, in the [list view](http://www.patternfly.org/pattern-library/content-views/list-view/#/api) or [card view](http://www.patternfly.org/pattern-library/content-views/card-view/#/api). + + +## Usage + +| Class | Usage | +| -- | -- | +| `.pf-icon--circle` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays an icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon--md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon--lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a large icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | diff --git a/source/scss/_pf-basic-icons.scss b/source/scss/_pf-basic-icons.scss index 3b786e77..48cf35dd 100644 --- a/source/scss/_pf-basic-icons.scss +++ b/source/scss/_pf-basic-icons.scss @@ -219,12 +219,21 @@ .#{$pf-icon-prefix}-zone:before { content: $pficon-var-zone; } -.pf-icon-circle-lg { - @include pf-icon-circle($icon-size-lg); -} -.pf-icon-circle-md { - @include pf-icon-circle($icon-size-md); -} -.pf-icon-circle-base { - @include pf-icon-circle($font-size-relative-base); +// Display icon at large or medium size +.pf-icon--lg { + font-size: $icon-size-lg; +} +.pf-icon--md { + font-size: $icon-size-md; +} +// Display circle around the icon +// width/height value should be 4px (i.e. 2 x border-width) greater than +// line-height value to accommodate 2px border on each side +.pf-icon--circle { + width: calc(2em + 4px); + height: calc(2em + 4px); + line-height: 2em; + text-align: center; + border: 2px solid $color-pf-blue-300; + border-radius: 50%; } diff --git a/source/scss/_pf-basic-mixins.scss b/source/scss/_pf-basic-mixins.scss index 8d9ee30b..5d20e528 100644 --- a/source/scss/_pf-basic-mixins.scss +++ b/source/scss/_pf-basic-mixins.scss @@ -65,15 +65,3 @@ } } } -// Display circle around the icon -@mixin pf-icon-circle($font-size) { - width: calc(2em + 4px); - height: calc(2em + 4px); - font-size: $font-size; - line-height: 2em; - text-align: center; - border: 2px solid $color-pf-blue-300; - border-radius: 50%; -} -// width/height value should be 4px (i.e. 2 x border-width) greater than -// line-height value to accommodate 2px border on each side From 48c50d721853ea413d894324e7faafdbff7e070f Mon Sep 17 00:00:00 2001 From: Jennifer Giardino Date: Wed, 2 Nov 2016 11:32:10 -0400 Subject: [PATCH 4/5] renaming pattern to be inclusive of other icon modifiers, and included examples of all combinations of modifier classes --- .../basics/03-icons/01-icon-modifiers.hbs | 5 +++++ .../basics/03-icons/01-icon-modifiers.md | 16 ++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 source/_patterns/basics/03-icons/01-icon-modifiers.hbs create mode 100644 source/_patterns/basics/03-icons/01-icon-modifiers.md diff --git a/source/_patterns/basics/03-icons/01-icon-modifiers.hbs b/source/_patterns/basics/03-icons/01-icon-modifiers.hbs new file mode 100644 index 00000000..db2fd3c7 --- /dev/null +++ b/source/_patterns/basics/03-icons/01-icon-modifiers.hbs @@ -0,0 +1,5 @@ +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--md" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--lg" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--md" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--lg" }} diff --git a/source/_patterns/basics/03-icons/01-icon-modifiers.md b/source/_patterns/basics/03-icons/01-icon-modifiers.md new file mode 100644 index 00000000..aed5fbfb --- /dev/null +++ b/source/_patterns/basics/03-icons/01-icon-modifiers.md @@ -0,0 +1,16 @@ +--- +title: PatternFly Icon Modifiers +--- + +## Overview + +PatternFly icons can be modified to display at larger sizes or enclosed in a circle. Some examples of icons displaying at different sizes and in a circle are available in the [list view](http://www.patternfly.org/pattern-library/content-views/list-view/#/api) and the [card view](http://www.patternfly.org/pattern-library/content-views/card-view/#/api). + + +## Usage + +| Class | Usage | +| -- | -- | +| `.pf-icon--md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon--lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a large icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon--circle` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays an icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | From c1949f8af27c1f6a4b00fe4b5726583a4bf38ada Mon Sep 17 00:00:00 2001 From: Jennifer Giardino Date: Wed, 2 Nov 2016 11:50:07 -0400 Subject: [PATCH 5/5] including separate files for icon sizes and icon circle (and hopefully fixing renaming file issue that popped up in the previous commit) --- .../basics/03-icons/01-icon-modifiers.hbs | 5 ----- .../basics/03-icons/01-icon-modifiers.md | 16 ---------------- .../_patterns/basics/03-icons/01-icon-sizes.hbs | 2 ++ .../_patterns/basics/03-icons/01-icon-sizes.md | 15 +++++++++++++++ .../{01-icon-circle.hbs => 02-icon-circle.hbs} | 0 .../{01-icon-circle.md => 02-icon-circle.md} | 4 +--- 6 files changed, 18 insertions(+), 24 deletions(-) delete mode 100644 source/_patterns/basics/03-icons/01-icon-modifiers.hbs delete mode 100644 source/_patterns/basics/03-icons/01-icon-modifiers.md create mode 100644 source/_patterns/basics/03-icons/01-icon-sizes.hbs create mode 100644 source/_patterns/basics/03-icons/01-icon-sizes.md rename source/_patterns/basics/03-icons/{01-icon-circle.hbs => 02-icon-circle.hbs} (100%) rename source/_patterns/basics/03-icons/{01-icon-circle.md => 02-icon-circle.md} (60%) diff --git a/source/_patterns/basics/03-icons/01-icon-modifiers.hbs b/source/_patterns/basics/03-icons/01-icon-modifiers.hbs deleted file mode 100644 index db2fd3c7..00000000 --- a/source/_patterns/basics/03-icons/01-icon-modifiers.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--md" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--lg" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--md" }} -{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--lg" }} diff --git a/source/_patterns/basics/03-icons/01-icon-modifiers.md b/source/_patterns/basics/03-icons/01-icon-modifiers.md deleted file mode 100644 index aed5fbfb..00000000 --- a/source/_patterns/basics/03-icons/01-icon-modifiers.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: PatternFly Icon Modifiers ---- - -## Overview - -PatternFly icons can be modified to display at larger sizes or enclosed in a circle. Some examples of icons displaying at different sizes and in a circle are available in the [list view](http://www.patternfly.org/pattern-library/content-views/list-view/#/api) and the [card view](http://www.patternfly.org/pattern-library/content-views/card-view/#/api). - - -## Usage - -| Class | Usage | -| -- | -- | -| `.pf-icon--md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pf-icon--lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a large icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pf-icon--circle` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays an icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | diff --git a/source/_patterns/basics/03-icons/01-icon-sizes.hbs b/source/_patterns/basics/03-icons/01-icon-sizes.hbs new file mode 100644 index 00000000..814b508a --- /dev/null +++ b/source/_patterns/basics/03-icons/01-icon-sizes.hbs @@ -0,0 +1,2 @@ +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--md" }} +{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--lg" }} diff --git a/source/_patterns/basics/03-icons/01-icon-sizes.md b/source/_patterns/basics/03-icons/01-icon-sizes.md new file mode 100644 index 00000000..200927ab --- /dev/null +++ b/source/_patterns/basics/03-icons/01-icon-sizes.md @@ -0,0 +1,15 @@ +--- +title: PatternFly Icon with Circle Decorator +--- + +## Overview + +PatternFly icons can display at larger sizes as shown in the [Aggregate Status Card](http://www.patternfly.org/pattern-library/cards/aggregate-status-card/#/api) or the [Card View Variations](http://www.patternfly.org/pattern-library/content-views/card-view/#/api). + + +## Usage + +| Class | Usage | +| -- | -- | +| `.pf-icon--md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon--lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a large icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | diff --git a/source/_patterns/basics/03-icons/01-icon-circle.hbs b/source/_patterns/basics/03-icons/02-icon-circle.hbs similarity index 100% rename from source/_patterns/basics/03-icons/01-icon-circle.hbs rename to source/_patterns/basics/03-icons/02-icon-circle.hbs diff --git a/source/_patterns/basics/03-icons/01-icon-circle.md b/source/_patterns/basics/03-icons/02-icon-circle.md similarity index 60% rename from source/_patterns/basics/03-icons/01-icon-circle.md rename to source/_patterns/basics/03-icons/02-icon-circle.md index a2cefeeb..a5377b8a 100644 --- a/source/_patterns/basics/03-icons/01-icon-circle.md +++ b/source/_patterns/basics/03-icons/02-icon-circle.md @@ -11,6 +11,4 @@ Some PatternFly patterns display an icon with a circle arount it. For example, i | Class | Usage | | -- | -- | -| `.pf-icon--circle` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays an icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pf-icon--md` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a medium icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | -| `.pf-icon--lg` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays a large icon **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. | +| `.pf-icon--circle` **Applied to:** `.pficon` or `.fa` | **Outcome:** Displays an icon with a circle around it **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. Can be used with any size icon. |