7 |
9 |
3 |
12 |
4 | 
5 |
8 |
5 | 404. That's an error.
6 |The requested URL was not found on this server.
7 |
9 | 
10 |
11 |
10 |
5 |
10 | Read the full documentation for these components.
91 | Learn more 93 |SALES
13 |Better than last week (25%)
23 |SUBSCRIPTIONS
37 |Worse than last week (25%)
47 |TRAFFIC
61 |Better than last week (75%)
71 |ORGANIC TRAFFIC
85 |Better than last week (25%)
95 |
9 |
10 |
11 | SALES
17 |Better than last week (25%)
30 |SUBSCRIPTIONS
50 |Worse than last week (25%)
63 |TRAFFIC
83 |Worse than last week (75%)
96 |ORGANIC TRAFFIC
116 |Better than last week (25%)
129 |Some quick example text to build on the card title and make up the bulk of the card's content.
14 |To use the component simply wrap your card's content in the following:
23 |<cascading-card>...</cascading-card>
25 | At first, the component appears as a featureless surface. It can easily be transformed into a stylish (and customizable!) 27 | display tool. It's achieved by using its four attributes.
28 || Attributes | 31 | 32 | 33 ||
|---|---|
| src | 35 |
36 | What puts "cascading" into "cascading card" is an image. The attribute is used to specify the source of the 37 | picture - can be an URL or a relative path. 38 | |
39 |
| headerType | 42 |
43 | The attribute is used to decide the context an image has inside the component. By default, picture and card
44 | containing it have the same width, but setting
45 | |
49 |
| title | 52 |
53 | To easily set title for our card, we can add optional
54 | |
58 |
| alignment | 61 |
62 | The final attribute is rather self-explanatory. It applies to card's content, and to be specific - everything
63 | passed in as
64 | It accepts
67 | |
72 |
This is a paragraph
92 |To use the component simply wrap your card's content in the following:
101 |<panel>...</panel>
103 | At first, the component appears as a featureless surface. It can easily be transformed into a stylish (and customizable!) 105 | display tool. It's achieved by using its four attributes.
106 || Attributes | 109 | 110 | 111 ||
|---|---|
| header | 113 |
114 | Including this attribute with some text will create a
115 | |
117 |
| footer | 120 |
121 | The attribute works symmetrically to
122 | |
124 |
| color | 127 |
128 | To add consistency to our layout, we can specify color to be applied to
129 | |
132 |
| alignment | 135 |
136 | The final attribute is rather self-explanatory. It applies to panel's content, and to be specific - everything
137 | passed in as
138 | It accepts
142 | |
147 |
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles 15 | are 16 | inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the 17 | parent.
18 | 19 | 20 || # | 24 |First Name | 25 |Last Name | 26 |Username | 27 |
|---|---|---|---|
| 1 | 32 |Mark | 33 |Otto | 34 |@mdo | 35 |
| 2 | 38 |Jacob | 39 |Thornton | 40 |@fat | 41 |
| 3 | 44 |Larry | 45 |the Bird | 46 |
To change a background-color of thead (or any other element) use our color classes. If you are going 53 | to use 54 | a dark background you should also consider white text (to provide a proper contrast) by adding 55 | .text-white 56 | class. 57 |
58 | 59 | 60 | 61 || # | 67 |First Name | 68 |Last Name | 69 |Username | 70 |
|---|---|---|---|
| 1 | 78 |Mark | 79 |Otto | 80 |@mdo | 81 |
| 2 | 84 |Jacob | 85 |Thornton | 86 |@fat | 87 |
| 3 | 90 |Larry | 91 |the Bird | 92 |
| # | 106 |First Name | 107 |Last Name | 108 |Username | 109 |
|---|---|---|---|
| 1 | 117 |Mark | 118 |Otto | 119 |@mdo | 120 |
| 2 | 123 |Jacob | 124 |Thornton | 125 |@fat | 126 |
| 3 | 129 |Larry | 130 |the Bird | 131 |
| # | 146 |First Name | 147 |Last Name | 148 |Username | 149 |
|---|---|---|---|
| 1 | 154 |Mark | 155 |Otto | 156 |@mdo | 157 |
| 2 | 160 |Jacob | 161 |Thornton | 162 |@fat | 163 |
| 3 | 166 |Larry | 167 |the Bird | 168 |
12 |
13 |
14 |
15 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione perferendis 26 | quod animi dignissimos consectetur 27 | quibusdam numquam laboriosam, minus, provident...
28 | 29 |
65 |
66 |
67 |
68 | Some quick example text to build on the card title and make up the bulk 76 | of the card's content. 77 |
78 |
105 |
106 |
107 |
108 | Some quick example text to build on the card title and make up the bulk 116 | of the card's content. 117 |
118 |
150 |
151 |
152 |
153 | Some quick example text to build on the card title and make up the bulk 161 | of the card's content. 162 |
163 |
189 |
190 |
191 |
192 | Some quick example text to build on the card title and make up the bulk 200 | of the card's content. 201 |
202 | 203 |