Skip to content

Commit 8fbcb9e

Browse files
gvreddy04gvreddy04
committed
Demo.RCL - Sections updated
1 parent 04158bb commit 8fbcb9e

File tree

63 files changed

+2214
-1851
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+2214
-1851
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor‎

Lines changed: 88 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -11,80 +11,94 @@
1111

1212
<CarbonAds />
1313

14-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
15-
<div>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</div>
16-
<Demo Type="typeof(Button_Demo_01_Examples)" />
17-
18-
<SectionHeading Size="HeadingSize.H2" Text="Button tags" PageUrl="@pageUrl" HashTagName="button-tags" />
19-
<Demo Type="typeof(Button_Demo_02_Button_Tags)" />
20-
21-
<SectionHeading Size="HeadingSize.H2" Text="Outline buttons" PageUrl="@pageUrl" HashTagName="outline-buttons" />
22-
<Demo Type="typeof(Button_Demo_03_Outline_Buttons)" />
23-
24-
<Callout Color="CalloutColor.Info">
25-
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
26-
</Callout>
27-
28-
<SectionHeading Size="HeadingSize.H2" Text="Sizes" PageUrl="@pageUrl" HashTagName="sizes" />
29-
<div>Fancy larger or smaller buttons? Add <code>Size="ButtonSize.Large"</code> or <code>Size="ButtonSize.Small"</code> for additional sizes.</div>
30-
<Demo Type="typeof(Button_Demo_04_Sizes_A)" />
31-
<Demo Type="typeof(Button_Demo_04_Sizes_B)" />
32-
<Demo Type="typeof(Button_Demo_04_Sizes_C)" />
33-
34-
<SectionHeading Size="HeadingSize.H2" Text="Disabled state" PageUrl="@pageUrl" HashTagName="disabled-state" />
35-
<div>Make buttons look inactive by adding the <code>Disabled="true"</code> boolean parameter to any <code>Button</code> component. Disabled buttons have <code>pointer-events: none</code> applied to, preventing hover and active states from triggering.</div>
36-
37-
<Callout Type="CalloutColor.Info">
38-
Disabled buttons using the <code>Type="ButtonType.Link"</code> parameter behave a bit different.
39-
</Callout>
40-
41-
<Demo Type="typeof(Button_Demo_05_Disabled_State_A)" />
42-
<Demo Type="typeof(Button_Demo_05_Disabled_State_B)" />
43-
44-
<SectionHeading Size="HeadingSize.H2" Text="Disable and enable state dynamically" PageUrl="@pageUrl" HashTagName="disable-and-enable-state-dynamically" />
45-
<Demo Type="typeof(Button_Demo_13_Disable_Enable_Dynamically)" />
46-
47-
<SectionHeading Size="HeadingSize.H2" Text="Block buttons" PageUrl="@pageUrl" HashTagName="block-buttons" />
48-
<Demo Type="typeof(Button_Demo_06_Block_Buttons_A)" />
49-
<Demo Type="typeof(Button_Demo_06_Block_Buttons_B)" />
50-
<Demo Type="typeof(Button_Demo_06_Block_Buttons_C)" />
51-
<Demo Type="typeof(Button_Demo_06_Block_Buttons_D)" />
52-
53-
<SectionHeading Size="HeadingSize.H2" Text="Toggle states" PageUrl="@pageUrl" HashTagName="toggle-states" />
54-
<Demo Type="typeof(Button_Demo_07_Toggle_States_A)" />
55-
<Demo Type="typeof(Button_Demo_07_Toggle_States_B)" />
56-
57-
<SectionHeading Size="HeadingSize.H2" Text="Loading spinner" PageUrl="@pageUrl" HashTagName="loading-spinner" />
58-
<div>Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</div>
59-
<Demo Type="typeof(Button_Demo_08_Loading_Spinner)" />
60-
61-
<SectionHeading Size="HeadingSize.H2" Text="Show/Hide loading spinner" PageUrl="@pageUrl" HashTagName="show-hide-loading-spinner" />
62-
<Demo Type="typeof(Button_Demo_08_Show_Hide_Loading_Spinner)" Tabs="true" />
63-
64-
<SectionHeading Size="HeadingSize.H2" Text="Show Tooltip" PageUrl="@pageUrl" HashTagName="show-tooltip" />
65-
<div class="mb-3">
66-
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
67-
</div>
68-
<Demo Type="typeof(Button_Demo_09_A_Show_Tooltip)" />
69-
70-
<SectionHeading Size="HeadingSize.H2" Text="Dynamically update the tooltip text" PageUrl="@pageUrl" HashTagName="dynamically-update-the-tooltip-text" />
71-
<Demo Type="typeof(Button_Demo_09_B_Dynamically_update_the_tooltip_text)" />
72-
73-
<SectionHeading Size="HeadingSize.H2" Text="Custom tooltips" PageUrl="@pageUrl" HashTagName="custom-tooltips" />
74-
<div class="mb-3">
75-
Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose.
76-
The <b>TooltipColor</b> parameter can be used to customize the color of the tooltip.
77-
</div>
78-
<Demo Type="typeof(Button_Demo_09_C_Tooltip_Color)" />
79-
80-
<Callout Color="CalloutColor.Warning">
81-
Support for HTML tooltips is not available at this moment.
82-
</Callout>
83-
84-
<SectionHeading Size="HeadingSize.H2" Text="Click events" PageUrl="@pageUrl" HashTagName="click-events" />
85-
<Demo Type="typeof(Button_Demo_10_Click_Event)" />
86-
<Demo Type="typeof(Button_Demo_11_Double_Click_Event)" />
87-
<Demo Type="typeof(Button_Demo_12_Click_Event_With_Args)" />
14+
<Section Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
15+
<div>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</div>
16+
<Demo Type="typeof(Button_Demo_01_Examples)" />
17+
</Section>
18+
19+
<Section Size="HeadingSize.H2" Text="Button tags" PageUrl="@pageUrl" HashTagName="button-tags">
20+
<Demo Type="typeof(Button_Demo_02_Button_Tags)" />
21+
</Section>
22+
23+
<Section Size="HeadingSize.H2" Text="Outline buttons" PageUrl="@pageUrl" HashTagName="outline-buttons">
24+
<Demo Type="typeof(Button_Demo_03_Outline_Buttons)" />
25+
26+
<Callout Color="CalloutColor.Info">
27+
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
28+
</Callout>
29+
</Section>
30+
31+
<Section Size="HeadingSize.H2" Text="Sizes" PageUrl="@pageUrl" HashTagName="sizes">
32+
<div>Fancy larger or smaller buttons? Add <code>Size="ButtonSize.Large"</code> or <code>Size="ButtonSize.Small"</code> for additional sizes.</div>
33+
<Demo Type="typeof(Button_Demo_04_Sizes_A)" />
34+
<Demo Type="typeof(Button_Demo_04_Sizes_B)" />
35+
<Demo Type="typeof(Button_Demo_04_Sizes_C)" />
36+
</Section>
37+
38+
<Section Size="HeadingSize.H2" Text="Disabled state" PageUrl="@pageUrl" HashTagName="disabled-state">
39+
<div>Make buttons look inactive by adding the <code>Disabled="true"</code> boolean parameter to any <code>Button</code> component. Disabled buttons have <code>pointer-events: none</code> applied to, preventing hover and active states from triggering.</div>
40+
41+
<Callout Type="CalloutColor.Info">
42+
Disabled buttons using the <code>Type="ButtonType.Link"</code> parameter behave a bit different.
43+
</Callout>
44+
45+
<Demo Type="typeof(Button_Demo_05_Disabled_State_A)" />
46+
<Demo Type="typeof(Button_Demo_05_Disabled_State_B)" />
47+
</Section>
48+
49+
<Section Size="HeadingSize.H2" Text="Disable and enable state dynamically" PageUrl="@pageUrl" HashTagName="disable-and-enable-state-dynamically">
50+
<Demo Type="typeof(Button_Demo_13_Disable_Enable_Dynamically)" />
51+
</Section>
52+
53+
<Section Size="HeadingSize.H2" Text="Block buttons" PageUrl="@pageUrl" HashTagName="block-buttons">
54+
<Demo Type="typeof(Button_Demo_06_Block_Buttons_A)" />
55+
<Demo Type="typeof(Button_Demo_06_Block_Buttons_B)" />
56+
<Demo Type="typeof(Button_Demo_06_Block_Buttons_C)" />
57+
<Demo Type="typeof(Button_Demo_06_Block_Buttons_D)" />
58+
</Section>
59+
60+
<Section Size="HeadingSize.H2" Text="Toggle states" PageUrl="@pageUrl" HashTagName="toggle-states">
61+
<Demo Type="typeof(Button_Demo_07_Toggle_States_A)" />
62+
<Demo Type="typeof(Button_Demo_07_Toggle_States_B)" />
63+
</Section>
64+
65+
<Section Size="HeadingSize.H2" Text="Loading spinner" PageUrl="@pageUrl" HashTagName="loading-spinner">
66+
<div>Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</div>
67+
<Demo Type="typeof(Button_Demo_08_Loading_Spinner)" />
68+
</Section>
69+
70+
<Section Size="HeadingSize.H2" Text="Show/Hide loading spinner" PageUrl="@pageUrl" HashTagName="show-hide-loading-spinner">
71+
<Demo Type="typeof(Button_Demo_08_Show_Hide_Loading_Spinner)" Tabs="true" />
72+
</Section>
73+
74+
<Section Size="HeadingSize.H2" Text="Show Tooltip" PageUrl="@pageUrl" HashTagName="show-tooltip">
75+
<div class="mb-3">
76+
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
77+
</div>
78+
<Demo Type="typeof(Button_Demo_09_A_Show_Tooltip)" />
79+
</Section>
80+
81+
<Section Size="HeadingSize.H2" Text="Dynamically update the tooltip text" PageUrl="@pageUrl" HashTagName="dynamically-update-the-tooltip-text">
82+
<Demo Type="typeof(Button_Demo_09_B_Dynamically_update_the_tooltip_text)" />
83+
</Section>
84+
85+
<Section Size="HeadingSize.H2" Text="Custom tooltips" PageUrl="@pageUrl" HashTagName="custom-tooltips">
86+
<div class="mb-3">
87+
Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose.
88+
The <b>TooltipColor</b> parameter can be used to customize the color of the tooltip.
89+
</div>
90+
<Demo Type="typeof(Button_Demo_09_C_Tooltip_Color)" />
91+
92+
<Callout Color="CalloutColor.Warning">
93+
Support for HTML tooltips is not available at this moment.
94+
</Callout>
95+
</Section>
96+
97+
<Section Size="HeadingSize.H2" Text="Click events" PageUrl="@pageUrl" HashTagName="click-events">
98+
<Demo Type="typeof(Button_Demo_10_Click_Event)" />
99+
<Demo Type="typeof(Button_Demo_11_Double_Click_Event)" />
100+
<Demo Type="typeof(Button_Demo_12_Click_Event_With_Args)" />
101+
</Section>
88102

89103
@code {
90104
private const string pageUrl = RouteConstants.Demos_Buttons_Documentation;

‎BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,21 @@
1111

1212
<CarbonAds />
1313

14-
<SectionHeading Size="HeadingSize.H4" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
15-
<Demo Type="typeof(Callout_Demo_01_Examples)" />
14+
<Section Size="HeadingSize.H4" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
15+
<Demo Type="typeof(Callout_Demo_01_Examples)" />
16+
</Section>
1617

17-
<SectionHeading Size="HeadingSize.H4" Text="Custom heading" PageUrl="@pageUrl" HashTagName="custom-heading" />
18-
<Demo Type="typeof(Callout_Demo_02_Change_Heading)" />
18+
<Section Size="HeadingSize.H4" Text="Custom heading" PageUrl="@pageUrl" HashTagName="custom-heading">
19+
<Demo Type="typeof(Callout_Demo_02_Change_Heading)" />
20+
</Section>
1921

20-
<SectionHeading Size="HeadingSize.H4" Text="Large text" PageUrl="@pageUrl" HashTagName="large-text" />
21-
<Demo Type="typeof(Callout_Demo_03_Large_Text)" />
22+
<Section Size="HeadingSize.H4" Text="Large text" PageUrl="@pageUrl" HashTagName="large-text">
23+
<Demo Type="typeof(Callout_Demo_03_Large_Text)" />
24+
</Section>
2225

23-
<SectionHeading Size="HeadingSize.H4" Text="Hide heading" PageUrl="@pageUrl" HashTagName="hide-heading" />
24-
<Demo Type="typeof(Callout_Demo_04_Hide_Heading)" />
26+
<Section Size="HeadingSize.H4" Text="Hide heading" PageUrl="@pageUrl" HashTagName="hide-heading">
27+
<Demo Type="typeof(Callout_Demo_04_Hide_Heading)" />
28+
</Section>
2529

2630
@code {
2731
private const string pageUrl = RouteConstants.Demos_Callout_Documentation;

‎BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor‎

Lines changed: 91 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -11,83 +11,97 @@
1111

1212
<CarbonAds />
1313

14-
<SectionHeading Size="HeadingSize.H2" Text="About" PageUrl="@pageUrl" HashTagName="about" />
15-
<div class="mb-3">
16-
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
17-
</div>
18-
19-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
20-
<div class="mb-3">
21-
Below is an example of a basic card with mixed content and a fixed width.
22-
Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
23-
</div>
24-
<Demo Type="typeof(Card_Demo_01_Examples)" Tabs="false" />
25-
26-
<SectionHeading Size="HeadingSize.H2" Text="Content types" PageUrl="@pageUrl" HashTagName="content-types" />
27-
<div class="mb-3">
28-
Cards support a wide variety of content, including images, text, list groups, links, and more.
29-
Below are examples of what’s supported.
30-
</div>
31-
32-
<SectionHeading Size="HeadingSize.H2" Text="Body" PageUrl="@pageUrl" HashTagName="body" />
33-
<div class="mb-3">
34-
The building block of a card is the <b>CardBody</b>. Use it whenever you need a padded section within a card.
35-
</div>
36-
<Demo Type="typeof(Card_Demo_02_Content_Types_Body)" Tabs="false" />
37-
38-
<SectionHeading Size="HeadingSize.H2" Text="Titles, text, and links" PageUrl="@pageUrl" HashTagName="titles-text-and-links" />
39-
<Demo Type="typeof(Card_Demo_03_Content_Types_Titles_Text_And_Links)" Tabs="false" />
40-
41-
<SectionHeading Size="HeadingSize.H2" Text="Images" PageUrl="@pageUrl" HashTagName="images" />
42-
<Demo Type="typeof(Card_Demo_04_Content_Types_Images)" Tabs="true" />
43-
44-
<SectionHeading Size="HeadingSize.H2" Text="List groups" PageUrl="@pageUrl" HashTagName="list-groups" />
45-
<div class="mb-3">
46-
Create lists of content in a card with a flush list group.
47-
</div>
48-
<Demo Type="typeof(Card_Demo_05_Content_Types_List_Groups)" Tabs="false" />
49-
50-
<SectionHeading Size="HeadingSize.H2" Text="Kitchen sink" PageUrl="@pageUrl" HashTagName="kitchen-sink" />
51-
<div class="mb-3">
52-
Mix and match multiple content types to create the card you need, or throw everything in there.
53-
Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
54-
</div>
55-
<Demo Type="typeof(Card_Demo_06_Content_Types_Kitchen_Sink)" Tabs="false" />
56-
57-
<SectionHeading Size="HeadingSize.H2" Text="Header and footer" PageUrl="@pageUrl" HashTagName="header-and-footer" />
58-
<div class="mb-3">
59-
Add an optional header and/or footer within a card.
60-
</div>
61-
<Demo Type="typeof(Card_Demo_07_Header_And_Footer)" Tabs="false" />
62-
63-
<SectionHeading Size="HeadingSize.H2" Text="Sizing" PageUrl="@pageUrl" HashTagName="sizing" />
64-
<div class="mb-3">
65-
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.
66-
You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
67-
</div>
68-
<Demo Type="typeof(Card_Demo_08_Sizing)" Tabs="false" />
69-
70-
<SectionHeading Size="HeadingSize.H2" Text="Text alignment" PageUrl="@pageUrl" HashTagName="text-alignment" />
71-
<div class="mb-3">
72-
You can quickly change the text alignment of any card—in its entirety or specific parts—with our <b>TextAlignment</b> parameter.
73-
</div>
74-
<Demo Type="typeof(Card_Demo_09_Text_Alignment)" Tabs="true" />
75-
76-
<SectionHeading Size="HeadingSize.H2" Text="Background and color" PageUrl="@pageUrl" HashTagName="background-and-color" />
77-
<Demo Type="typeof(Card_Demo_10_Background_And_Color)" Tabs="true" />
78-
79-
<SectionHeading Size="HeadingSize.H2" Text="Card groups" PageUrl="@pageUrl" HashTagName="card-groups" />
80-
<div class="mb-3">
81-
Use card groups to render cards as a single, attached element with equal width and height columns.
82-
Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
83-
</div>
84-
<Demo Type="typeof(Card_Demo_11_Card_Groups)" Tabs="true" />
85-
86-
<SectionHeading Size="HeadingSize.H2" Text="Card groups with footer" PageUrl="@pageUrl" HashTagName="card-groups-with-footer" />
87-
<div class="mb-3">
88-
When using card groups with footers, their content will automatically line up.
89-
</div>
90-
<Demo Type="typeof(Card_Demo_12_Card_Groups_With_Footer)" Tabs="true" />
14+
<Section Size="HeadingSize.H2" Text="About" PageUrl="@pageUrl" HashTagName="about">
15+
<div class="mb-3">
16+
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
17+
</div>
18+
</Section>
19+
20+
<Section Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
21+
<div class="mb-3">
22+
Below is an example of a basic card with mixed content and a fixed width.
23+
Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
24+
</div>
25+
<Demo Type="typeof(Card_Demo_01_Examples)" Tabs="false" />
26+
</Section>
27+
28+
<Section Size="HeadingSize.H2" Text="Content types" PageUrl="@pageUrl" HashTagName="content-types">
29+
<div class="mb-3">
30+
Cards support a wide variety of content, including images, text, list groups, links, and more.
31+
Below are examples of what’s supported.
32+
</div>
33+
</Section>
34+
35+
<Section Size="HeadingSize.H2" Text="Body" PageUrl="@pageUrl" HashTagName="body">
36+
<div class="mb-3">
37+
The building block of a card is the <b>CardBody</b>. Use it whenever you need a padded section within a card.
38+
</div>
39+
<Demo Type="typeof(Card_Demo_02_Content_Types_Body)" Tabs="false" />
40+
</Section>
41+
42+
<Section Size="HeadingSize.H2" Text="Titles, text, and links" PageUrl="@pageUrl" HashTagName="titles-text-and-links">
43+
<Demo Type="typeof(Card_Demo_03_Content_Types_Titles_Text_And_Links)" Tabs="false" />
44+
</Section>
45+
46+
<Section Size="HeadingSize.H2" Text="Images" PageUrl="@pageUrl" HashTagName="images">
47+
<Demo Type="typeof(Card_Demo_04_Content_Types_Images)" Tabs="true" />
48+
</Section>
49+
50+
<Section Size="HeadingSize.H2" Text="List groups" PageUrl="@pageUrl" HashTagName="list-groups">
51+
<div class="mb-3">
52+
Create lists of content in a card with a flush list group.
53+
</div>
54+
<Demo Type="typeof(Card_Demo_05_Content_Types_List_Groups)" Tabs="false" />
55+
</Section>
56+
57+
<Section Size="HeadingSize.H2" Text="Kitchen sink" PageUrl="@pageUrl" HashTagName="kitchen-sink">
58+
<div class="mb-3">
59+
Mix and match multiple content types to create the card you need, or throw everything in there.
60+
Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
61+
</div>
62+
<Demo Type="typeof(Card_Demo_06_Content_Types_Kitchen_Sink)" Tabs="false" />
63+
</Section>
64+
65+
<Section Size="HeadingSize.H2" Text="Header and footer" PageUrl="@pageUrl" HashTagName="header-and-footer">
66+
<div class="mb-3">
67+
Add an optional header and/or footer within a card.
68+
</div>
69+
<Demo Type="typeof(Card_Demo_07_Header_And_Footer)" Tabs="false" />
70+
</Section>
71+
72+
<Section Size="HeadingSize.H2" Text="Sizing" PageUrl="@pageUrl" HashTagName="sizing">
73+
<div class="mb-3">
74+
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.
75+
You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
76+
</div>
77+
<Demo Type="typeof(Card_Demo_08_Sizing)" Tabs="false" />
78+
</Section>
79+
80+
<Section Size="HeadingSize.H2" Text="Text alignment" PageUrl="@pageUrl" HashTagName="text-alignment">
81+
<div class="mb-3">
82+
You can quickly change the text alignment of any card—in its entirety or specific parts—with our <b>TextAlignment</b> parameter.
83+
</div>
84+
<Demo Type="typeof(Card_Demo_09_Text_Alignment)" Tabs="true" />
85+
</Section>
86+
87+
<Section Size="HeadingSize.H2" Text="Background and color" PageUrl="@pageUrl" HashTagName="background-and-color">
88+
<Demo Type="typeof(Card_Demo_10_Background_And_Color)" Tabs="true" />
89+
</Section>
90+
91+
<Section Size="HeadingSize.H2" Text="Card groups" PageUrl="@pageUrl" HashTagName="card-groups">
92+
<div class="mb-3">
93+
Use card groups to render cards as a single, attached element with equal width and height columns.
94+
Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
95+
</div>
96+
<Demo Type="typeof(Card_Demo_11_Card_Groups)" Tabs="true" />
97+
</Section>
98+
99+
<Section Size="HeadingSize.H2" Text="Card groups with footer" PageUrl="@pageUrl" HashTagName="card-groups-with-footer">
100+
<div class="mb-3">
101+
When using card groups with footers, their content will automatically line up.
102+
</div>
103+
<Demo Type="typeof(Card_Demo_12_Card_Groups_With_Footer)" Tabs="true" />
104+
</Section>
91105

92106
@code {
93107
private const string pageUrl = RouteConstants.Demos_Card_Documentation;

0 commit comments

Comments
 (0)