|
22 | 22 | </CCard>
|
23 | 23 | </CCol>
|
24 | 24 | <CCol sm="6" md="4">
|
25 |
| - <CCard footer-html="Card Footer" :body-html="loremIpsum" /> |
| 25 | + <CCard> |
| 26 | + <CCardBody>{{loremIpsum}}</CCardBody> |
| 27 | + <CCardFooter>Card Footer</CCardFooter> |
| 28 | + </CCard> |
26 | 29 | </CCol>
|
27 | 30 | <CCol sm="6" md="4">
|
28 |
| - <CCard |
29 |
| - headerHtml="<i class='cui-check'></i> Card with icon" |
30 |
| - :bodyHtml="loremIpsum" |
31 |
| - /> |
| 31 | + <CCard> |
| 32 | + <CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader> |
| 33 | + <CCardBody>{{loremIpsum}}</CCardBody> |
| 34 | + </CCard> |
32 | 35 | </CCol>
|
33 | 36 | <CCol sm="6" md="4">
|
34 | 37 | <CCard>
|
|
64 | 67 | <CCard>
|
65 | 68 | <CCardHeader>
|
66 | 69 | Card with label
|
67 |
| - <CBadge pill color="danger" class="float-right">42</CBadge> |
| 70 | + <CBadge shape="pill" color="danger" class="float-right">42</CBadge> |
68 | 71 | </CCardHeader>
|
69 | 72 | <CCardBody>
|
70 | 73 | {{loremIpsum}}
|
|
74 | 77 | </CRow>
|
75 | 78 | <CRow>
|
76 | 79 | <CCol sm="6" md="4">
|
77 |
| - <CCard |
78 |
| - header="Card outline primary" |
79 |
| - border-color="primary" |
80 |
| - :body-html="loremIpsum" |
81 |
| - /> |
| 80 | + <CCard border-color="primary"> |
| 81 | + <CCardHeader>Card outline primary</CCardHeader> |
| 82 | + <CCardBody>{{loremIpsum}}</CCardBody> |
| 83 | + </CCard> |
82 | 84 | </CCol>
|
83 | 85 | <CCol sm="6" md="4">
|
84 |
| - <CCard |
85 |
| - header="Card outline secondary" |
86 |
| - border-color="secondary" |
87 |
| - :body-html="loremIpsum" |
88 |
| - /> |
| 86 | + <CCard border-color="secondary"> |
| 87 | + <CCardHeader>Card outline secondary</CCardHeader> |
| 88 | + <CCardBody>{{loremIpsum}}</CCardBody> |
| 89 | + </CCard> |
89 | 90 | </CCol>
|
90 | 91 | <CCol sm="6" md="4">
|
91 |
| - <CCard |
92 |
| - header="Card outline success" |
93 |
| - border-color="success" |
94 |
| - body-wrapper |
95 |
| - > |
96 |
| - {{loremIpsum}} |
| 92 | + <CCard border-color="success"> |
| 93 | + <CCardHeader>Card outline success</CCardHeader> |
| 94 | + <CCardBody>{{loremIpsum}}</CCardBody> |
97 | 95 | </CCard>
|
98 | 96 | </CCol>
|
99 | 97 | <CCol sm="6" md="4">
|
100 |
| - <CCard header-html="Card outline info" border-color="info" body-wrapper> |
101 |
| - {{loremIpsum}} |
| 98 | + <CCard border-color="info"> |
| 99 | + <CCardHeader>Card outline info</CCardHeader> |
| 100 | + <CCardBody>{{loremIpsum}}</CCardBody> |
102 | 101 | </CCard>
|
103 | 102 | </CCol>
|
104 | 103 | <CCol sm="6" md="4">
|
105 |
| - <CCard header-html="Card outline warning" border-color="warning" body-wrapper> |
106 |
| - {{loremIpsum}} |
| 104 | + <CCard border-color="warning"> |
| 105 | + <CCardHeader>Card outline warning</CCardHeader> |
| 106 | + <CCardBody>{{loremIpsum}}</CCardBody> |
107 | 107 | </CCard>
|
108 | 108 | </CCol>
|
109 | 109 | <CCol sm="6" md="4">
|
110 |
| - <CCard header-html="Card outline danger" border-color="danger" body-wrapper> |
111 |
| - {{loremIpsum}} |
| 110 | + <CCard border-color="danger"> |
| 111 | + <CCardHeader>Card outline danger</CCardHeader> |
| 112 | + <CCardBody>{{loremIpsum}}</CCardBody> |
112 | 113 | </CCard>
|
113 | 114 | </CCol>
|
114 | 115 | </CRow>
|
115 | 116 |
|
116 | 117 | <CRow>
|
117 | 118 | <CCol sm="6" md="4">
|
118 |
| - <CCard class="card-accent-primary" header="Card with primary accent" body-wrapper> |
119 |
| - {{loremIpsum}} |
| 119 | + <CCard accent-color="primary"> |
| 120 | + <CCardHeader>Card with primary accent</CCardHeader> |
| 121 | + <CCardBody>{{loremIpsum}}</CCardBody> |
120 | 122 | </CCard>
|
121 | 123 | </CCol>
|
122 | 124 | <CCol sm="6" md="4">
|
123 |
| - <CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper> |
124 |
| - {{loremIpsum}} |
| 125 | + <CCard accent-color="secondary"> |
| 126 | + <CCardHeader>Card with secondary accent</CCardHeader> |
| 127 | + <CCardBody>{{loremIpsum}}</CCardBody> |
125 | 128 | </CCard>
|
126 | 129 | </CCol>
|
127 | 130 | <CCol sm="6" md="4">
|
128 |
| - <CCard class="card-accent-success" header="Card with success accent" body-wrapper> |
129 |
| - {{loremIpsum}} |
| 131 | + <CCard accent-color="success"> |
| 132 | + <CCardHeader>Card with success accent</CCardHeader> |
| 133 | + <CCardBody>{{loremIpsum}}</CCardBody> |
130 | 134 | </CCard>
|
131 | 135 | </CCol>
|
132 | 136 | <CCol sm="6" md="4">
|
133 |
| - <CCard class="card-accent-info" header="Card with info accent" body-wrapper> |
134 |
| - {{loremIpsum}} |
| 137 | + <CCard accent-color="info"> |
| 138 | + <CCardHeader>Card with info accent</CCardHeader> |
| 139 | + <CCardBody>{{loremIpsum}}</CCardBody> |
135 | 140 | </CCard>
|
136 | 141 | </CCol>
|
137 | 142 | <CCol sm="6" md="4">
|
138 |
| - <CCard class="card-accent-warning" header="Card with warning accent" body-wrapper> |
139 |
| - {{loremIpsum}} |
| 143 | + <CCard accent-color="info"> |
| 144 | + <CCardHeader>Card with info accent</CCardHeader> |
| 145 | + <CCardBody>{{loremIpsum}}</CCardBody> |
140 | 146 | </CCard>
|
141 | 147 | </CCol>
|
142 | 148 | <CCol sm="6" md="4">
|
143 |
| - <CCard class="card-accent-danger" header="Card with danger accent" body-wrapper> |
144 |
| - {{loremIpsum}} |
| 149 | + <CCard accent-color="danger"> |
| 150 | + <CCardHeader>Card with danger accent</CCardHeader> |
| 151 | + <CCardBody>{{loremIpsum}}</CCardBody> |
145 | 152 | </CCard>
|
146 | 153 | </CCol>
|
147 | 154 | </CRow>
|
148 | 155 | <CRow>
|
149 | 156 | <CCol sm="6" md="4">
|
150 |
| - <CCard class="bg-primary text-center" body-wrapper> |
| 157 | + <CCard color="primary" class="text-center" body-wrapper> |
151 | 158 | <blockquote class="card-blockquote">
|
152 | 159 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
153 | 160 | <footer>Someone famous in
|
|
157 | 164 | </CCard>
|
158 | 165 | </CCol>
|
159 | 166 | <CCol sm="6" md="4">
|
160 |
| - <CCard class="bg-success text-center" body-wrapper> |
| 167 | + <CCard color="success" class="text-center" body-wrapper> |
161 | 168 | <blockquote class="card-blockquote">
|
162 | 169 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
163 | 170 | <footer>Someone famous in
|
|
167 | 174 | </CCard>
|
168 | 175 | </CCol>
|
169 | 176 | <CCol sm="6" md="4">
|
170 |
| - <CCard class="bg-info text-center" body-wrapper> |
| 177 | + <CCard color="info" class="text-center" body-wrapper> |
171 | 178 | <blockquote class="card-blockquote">
|
172 | 179 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
173 | 180 | <footer>Someone famous in
|
|
177 | 184 | </CCard>
|
178 | 185 | </CCol>
|
179 | 186 | <CCol sm="6" md="4">
|
180 |
| - <CCard class="bg-warning text-center" body-wrapper> |
| 187 | + <CCard color="warning" class="text-center" body-wrapper> |
181 | 188 | <blockquote class="card-blockquote">
|
182 | 189 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
183 | 190 | <footer>Someone famous in
|
|
187 | 194 | </CCard>
|
188 | 195 | </CCol>
|
189 | 196 | <CCol sm="6" md="4">
|
190 |
| - <CCard class="bg-danger text-center" body-wrapper> |
| 197 | + <CCard color="danger" class="text-center" body-wrapper> |
191 | 198 | <blockquote class="card-blockquote">
|
192 | 199 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
193 | 200 | <footer>Someone famous in
|
|
197 | 204 | </CCard>
|
198 | 205 | </CCol>
|
199 | 206 | <CCol sm="6" md="4">
|
200 |
| - <CCard class="bg-secondary text-center" body-wrapper> |
| 207 | + <CCard color="secondary" class="text-center" body-wrapper> |
201 | 208 | <blockquote class="card-blockquote">
|
202 | 209 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
203 | 210 | <footer>Someone famous in
|
|
209 | 216 | </CRow>
|
210 | 217 | <CRow>
|
211 | 218 | <CCol sm="6" md="4">
|
212 |
| - <CCard header-html="Card title" class="bg-primary" body-wrapper> |
213 |
| - {{loremIpsum}} |
| 219 | + <CCard color="primary" body-wrapper> |
| 220 | + {{loremIpsum}} |
214 | 221 | </CCard>
|
215 | 222 | </CCol>
|
216 | 223 | <CCol sm="6" md="4">
|
217 |
| - <CCard header-html="Card title" class="bg-success" body-wrapper> |
218 |
| - {{loremIpsum}} |
| 224 | + <CCard color="success" body-wrapper> |
| 225 | + {{loremIpsum}} |
219 | 226 | </CCard>
|
220 | 227 | </CCol>
|
221 | 228 | <CCol sm="6" md="4">
|
222 |
| - <CCard header-html="Card title" class="bg-info" body-wrapper> |
223 |
| - {{loremIpsum}} |
| 229 | + <CCard color="info" body-wrapper> |
| 230 | + {{loremIpsum}} |
224 | 231 | </CCard>
|
225 | 232 | </CCol>
|
226 | 233 | <CCol sm="6" md="4">
|
227 |
| - <CCard header-html="Card title" class="bg-warning" body-wrapper> |
228 |
| - {{loremIpsum}} |
| 234 | + <CCard color="warning" body-wrapper> |
| 235 | + {{loremIpsum}} |
229 | 236 | </CCard>
|
230 | 237 | </CCol>
|
231 | 238 | <CCol sm="6" md="4">
|
232 |
| - <CCard header-html="Card title" class="bg-danger" body-wrapper> |
233 |
| - {{loremIpsum}} |
| 239 | + <CCard color="danger" body-wrapper> |
| 240 | + {{loremIpsum}} |
234 | 241 | </CCard>
|
235 | 242 | </CCol>
|
236 | 243 | <CCol sm="6" md="4">
|
237 | 244 | <transition name="fade">
|
238 |
| - <CCard class="bg-secondary" v-if="show"> |
| 245 | + <CCard v-if="show" color="secondary"> |
239 | 246 | <CCardHeader>
|
240 | 247 | Card with header actions
|
241 | 248 | <div class="card-header-actions">
|
242 | 249 | <CLink href="#" class="card-header-action btn-setting">
|
243 |
| - <i class="cui-settings"></i> |
| 250 | + <CIcon name="cil-settings"/> |
244 | 251 | </CLink>
|
245 | 252 | <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
246 |
| - <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i> |
| 253 | + <CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/> |
247 | 254 | </CLink>
|
248 | 255 | <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
249 |
| - <i class="cui-circle-x"></i> |
| 256 | + <CIcon name="cil-x-circle"/> |
250 | 257 | </CLink>
|
251 | 258 | </div>
|
252 | 259 | </CCardHeader>
|
|
0 commit comments