Skip to content

Commit ec85d78

Browse files
attilaantalattilaantal
committed
docs(card): additional adjustments
1 parent eae896a commit ec85d78

File tree

7 files changed

+109
-30
lines changed

7 files changed

+109
-30
lines changed

‎controls/card/card-orientation.png‎

185 KB
Loading

‎controls/card/card-skins.gif‎

172 KB
Loading

‎controls/card/card-styles.png‎

46.8 KB
Loading

‎controls/card/layoutanimation.gif‎

754 KB
Loading

‎controls/card/overview.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,25 @@ screenshot & URL
7070

7171
## Layout
7272

73-
screenshot & URL
73+
- [Read more]({%slug card/layout %})
7474

75+
![Card - Layout](layoutanimation.gif)
7576

7677
## Orientation
7778

78-
screenshot & URL
79+
- [Read more]({%slug card/orientation %})
80+
81+
![Card - Orientation](card-orientation.png)
7982

8083
## Styles
8184

82-
screenshot & URL
85+
- [Read more]({%slug card/styles %})
86+
87+
![Card Styles](card-styles.png)
8388

8489
## Skins
8590

86-
screenshot & URL
87-
91+
- [Read more]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/controlling-visual-appearance/how-skins-work %})
92+
93+
![Card Skins](card-skins.gif)
94+

‎controls/card/skins.md‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎controls/card/styles.md‎

Lines changed: 97 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,28 +20,112 @@ Cards provide predefined state that you can use to change the Card appearance. T
2020
- Error
2121

2222
````ASP.NET
23-
<telerik:RadCard ID="RadCard1" runat="server" CardState="Default" Width="300px" Height="30px">
24-
<span><span class="k-icon k-i-unpin"></span> Default</span>
23+
<telerik:RadCard ID="RadCard1" runat="server" CardState="Default" Width="300px">
24+
<telerik:CardTitleComponent runat="server">
25+
Card Title Default
26+
</telerik:CardTitleComponent>
27+
<telerik:CardSubtitleComponent runat="server">
28+
Card Subtitle
29+
</telerik:CardSubtitleComponent>
30+
<telerik:CardBodyComponent runat="server">
31+
<p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
32+
</telerik:CardBodyComponent>
33+
<telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
34+
<span class="k-button k-flat k-default">Action 1</span>
35+
<telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
36+
</telerik:CardSeparatorComponent>
37+
<span class="k-button k-flat k-default">Action 2</span>
38+
</telerik:CardActionsContainerComponent>
2539
</telerik:RadCard>
2640
27-
<telerik:RadCard ID="RadCard1" runat="server" CardState="Primary" Width="300px" Height="30px">
28-
<span><span class="k-icon k-i-marker-pin-target"></span> Primary</span>
41+
<telerik:RadCard ID="RadCard2" runat="server" CardState="Primary" Width="300px">
42+
<telerik:CardTitleComponent runat="server">
43+
Card Title Primary
44+
</telerik:CardTitleComponent>
45+
<telerik:CardSubtitleComponent runat="server">
46+
Card Subtitle
47+
</telerik:CardSubtitleComponent>
48+
<telerik:CardBodyComponent runat="server">
49+
<p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
50+
</telerik:CardBodyComponent>
51+
<telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
52+
<span class="k-button k-flat k-primary">Action 1</span>
53+
<telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
54+
</telerik:CardSeparatorComponent>
55+
<span class="k-button k-flat k-primary">Action 2</span>
56+
</telerik:CardActionsContainerComponent>
2957
</telerik:RadCard>
3058
31-
<telerik:RadCard ID="RadCard1" runat="server" CardState="Info" Width="300px" Height="30px">
32-
<span><span class="k-icon k-i-information"></span> Info</span>
59+
<telerik:RadCard ID="RadCard3" runat="server" CardState="Info" Width="300px">
60+
<telerik:CardTitleComponent runat="server">
61+
Card Title Info
62+
</telerik:CardTitleComponent>
63+
<telerik:CardSubtitleComponent runat="server">
64+
Card Subtitle
65+
</telerik:CardSubtitleComponent>
66+
<telerik:CardBodyComponent runat="server">
67+
<p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
68+
</telerik:CardBodyComponent>
69+
<telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
70+
<span class="k-button k-flat k-info">Action 1</span>
71+
<telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
72+
</telerik:CardSeparatorComponent>
73+
<span class="k-button k-flat k-info">Action 2</span>
74+
</telerik:CardActionsContainerComponent>
3375
</telerik:RadCard>
3476
35-
<telerik:RadCard ID="RadCard1" runat="server" CardState="Success" Width="300px" Height="30px">
36-
<span><span class="k-icon k-i-check-outline"></span> Success</span>
77+
<telerik:RadCard ID="RadCard4" runat="server" CardState="Success" Width="300px">
78+
<telerik:CardTitleComponent runat="server">
79+
Card Title Success
80+
</telerik:CardTitleComponent>
81+
<telerik:CardSubtitleComponent runat="server">
82+
Card Subtitle
83+
</telerik:CardSubtitleComponent>
84+
<telerik:CardBodyComponent runat="server">
85+
<p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
86+
</telerik:CardBodyComponent>
87+
<telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
88+
<span class="k-button k-flat k-success">Action 1</span>
89+
<telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
90+
</telerik:CardSeparatorComponent>
91+
<span class="k-button k-flat k-success">Action 2</span>
92+
</telerik:CardActionsContainerComponent>
3793
</telerik:RadCard>
3894
39-
<telerik:RadCard ID="RadCard1" runat="server" CardState="Warning" Width="300px" Height="30px">
40-
<span><span class="k-icon k-i-warning"></span> Warning</span>
95+
<telerik:RadCard ID="RadCard5" runat="server" CardState="Warning" Width="300px">
96+
<telerik:CardTitleComponent runat="server">
97+
Card Title Warning
98+
</telerik:CardTitleComponent>
99+
<telerik:CardSubtitleComponent runat="server">
100+
Card Subtitle
101+
</telerik:CardSubtitleComponent>
102+
<telerik:CardBodyComponent runat="server">
103+
<p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
104+
</telerik:CardBodyComponent>
105+
<telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
106+
<span class="k-button k-flat k-warning">Action 1</span>
107+
<telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
108+
</telerik:CardSeparatorComponent>
109+
<span class="k-button k-flat k-warning">Action 2</span>
110+
</telerik:CardActionsContainerComponent>
41111
</telerik:RadCard>
42112
43-
<telerik:RadCard ID="RadCard1" runat="server" CardState="Error" Width="300px" Height="30px">
44-
<span><span class="k-icon k-i-close-outline"></span> Error</span>
113+
<telerik:RadCard ID="RadCard6" runat="server" CardState="Error" Width="300px">
114+
<telerik:CardTitleComponent runat="server">
115+
Card Title Error
116+
</telerik:CardTitleComponent>
117+
<telerik:CardSubtitleComponent runat="server">
118+
Card Subtitle
119+
</telerik:CardSubtitleComponent>
120+
<telerik:CardBodyComponent runat="server">
121+
<p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
122+
</telerik:CardBodyComponent>
123+
<telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
124+
<span class="k-button k-flat k-error">Action 1</span>
125+
<telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
126+
</telerik:CardSeparatorComponent>
127+
<span class="k-button k-flat k-error">Action 2</span>
128+
</telerik:CardActionsContainerComponent>
45129
</telerik:RadCard>
46130
````
47-
131+

0 commit comments

Comments
 (0)