Skip to content

Commit

Permalink
Demo.RCL - section component updates
Browse files Browse the repository at this point in the history
  • Loading branch information
gvreddy04 committed Nov 4, 2024
1 parent fc61ad2 commit 9683d59
Showing 1 changed file with 6 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,32 @@

<CarbonAds />

<Section Size="HeadingSize.H2" Text="About" PageUrl="@pageUrl" HashTagName="about">
<Section Size="HeadingSize.H2" Name="About" PageUrl="@pageUrl" HashTagName="about">
<div class="mb-3">
Placeholders can be used to enhance the experience of your application.
</div>
</Section>

<Section Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" HashTagName="examples">
<Demo Type="typeof(Placeholder_Demo_01_Examples)" />
</Section>

<Section Size="HeadingSize.H2" Text="Width" PageUrl="@pageUrl" HashTagName="width">
<Section Size="HeadingSize.H2" Name="Width" PageUrl="@pageUrl" HashTagName="width">
<div>You can change the width through <code>PlaceholderWidth</code>, width utilities, or inline styles.</div>
<Demo Type="typeof(Placeholder_Demo_02_Width)" />
</Section>

<Section Size="HeadingSize.H2" Text="Color" PageUrl="@pageUrl" HashTagName="color">
<Section Size="HeadingSize.H2" Name="Color" PageUrl="@pageUrl" HashTagName="color">
<div>By default, the placeholder uses currentColor. This can be overridden with the <code>Color</code> property of type enum.</div>
<Demo Type="typeof(Placeholder_Demo_03_Color)" />
</Section>

<Section Size="HeadingSize.H2" Text="Sizing" PageUrl="@pageUrl" HashTagName="sizing">
<Section Size="HeadingSize.H2" Name="Sizing" PageUrl="@pageUrl" HashTagName="sizing">
<div>The size of placeholders are based on the typographic style of the parent element. Customize them with <code>Size</code> property of type enum.</div>
<Demo Type="typeof(Placeholder_Demo_04_Sizing)" />
</Section>

<Section Size="HeadingSize.H2" Text="Animation" PageUrl="@pageUrl" HashTagName="animation">
<Section Size="HeadingSize.H2" Name="Animation" PageUrl="@pageUrl" HashTagName="animation">
<div>Animate placeholders with <code>PlaceholderAnimation.Glow</code> or <code>PlaceholderAnimation.Wave</code> to better convey the perception of something being actively loaded.</div>
<Demo Type="typeof(Placeholder_Demo_05_Animation)" />
</Section>
Expand Down

0 comments on commit 9683d59

Please sign in to comment.