1 module uim.bootstrap.bs5.demos.components.cards; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/cards", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Cards - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 auto textExample = demoBs5Example("text", "Text", 19 H5Div( 20 H5H6("Source: Immanuel Kant - What is Enlightenment?"), 21 BS5Card(["w-50"], 22 BS5CardBody( 23 BS5CardText("Enlightenment is the departure of the human being from its self-incurred minority."), 24 BS5CardText("Minority is the inability to make use of one's understanding without direction of another.") 25 )), 26 H5Br, 27 BS5Card( 28 BS5CardBody( 29 BS5CardText("This minority is self-incurred when the cause of it lies not in the lack of understanding but of resolution and of courage to make use of it without direction of another."), 30 BS5CardText("Have courage to make use of your own understanding! is thus the motto of enlightenment.") 31 )) 32 ), 33 `BS5Card(["w-50"], 34 BS5CardBody( 35 BS5CardText("..."), 36 BS5CardText("...") 37 )), 38 BS5Card( 39 BS5CardBody( 40 BS5CardText("..."), 41 BS5CardText("...") 42 ))`, `<div class="card w-50"> 43 <div class="card-body"> 44 <p class="card-text">...</p> 45 <p class="card-text">...</p> 46 </div> 47 </div> 48 <div class="card"> 49 <div class="card-body"> 50 <p class="card-text">...</p> 51 <p class="card-text">...</p> 52 </div> 53 </div>`); 54 55 auto titleExample = demoBs5Example("title", "Title", 56 H5Div( 57 BS5Card(["w-50"], 58 BS5CardBody( 59 BS5CardTitle("This is a Card title"))), 60 H5Br, 61 BS5Card( 62 BS5CardBody( 63 BS5CardTitle("This is a long Card title"))) 64 ), 65 `BS5Card(["w-50"], 66 BS5CardBody( 67 BS5CardTitle("..."))), 68 BS5Card( 69 BS5CardBody( 70 BS5CardTitle("..."))) 71 `, `<div class="card w-50"> 72 <div class="card-body"> 73 <h4 class="card-title">...</h4> 74 </div> 75 </div> 76 <div class="card"> 77 <div class="card-body"> 78 <h4 class="card-title">...</h4> 79 </div> 80 </div>`); 81 82 auto subtitleExample = demoBs5Example("subtitle", "Subtitle", 83 H5Div( 84 BS5Card(["w-50"], 85 BS5CardBody( 86 BS5CardSubtitle("Card subtitle"))), 87 H5Br, 88 BS5Card( 89 BS5CardBody( 90 BS5CardSubtitle("Longer card subtitle"))) 91 ), 92 `BS5Card(["w-50"], 93 BS5CardBody( 94 BS5CardSubtitle("Card subtitle"))), 95 BS5Card( 96 BS5CardBody( 97 BS5CardSubtitle("Longer card subtitle"))) 98 `, ``); 99 100 auto buttonExample = demoBs5Example("button", "Button", 101 H5Div( 102 BS5Card(["w-50"], 103 BS5CardBody( 104 BS5ButtonLink(["btn-primary"], "Button"))), 105 H5Br, 106 BS5Card( 107 BS5CardBody( 108 BS5ButtonLink(["btn-primary"], "Long Button"))) 109 ), 110 `BS5Card(["w-50"], 111 BS5CardBody( 112 BS5ButtonLink(["btn-primary"], "Button"))), 113 BS5Card( 114 BS5CardBody( 115 BS5ButtonLink(["btn-primary"], "Long Button")))`, 116 `<div class="card w-50"> 117 <div class="card-body"> 118 <a class="btn btn-primary" type="button">Button</a> 119 </div> 120 </div> 121 <div class="card"> 122 <div class="card-body"> 123 <a class="btn btn-primary" type="button">Long Button</a> 124 </div> 125 </div>`); 126 127 auto linksExample = demoBs5Example("links", "Links", 128 H5Div( 129 BS5CardBody( 130 BS5CardLink(["href":"#"], "Card link 1"), 131 BS5CardLink(["href":"#"], "Card link 2"), 132 BS5CardLink(["href":"#"], "Card link 3")) 133 ), 134 `BS5CardBody( 135 BS5CardLink(["href":"#"], "Card link 1"), 136 BS5CardLink(["href":"#"], "Card link 2"), 137 BS5CardLink(["href":"#"], "Card link 3"))`, 138 `<div class="card-body"> 139 <a class="card-link" href="#">Card link 1</a> 140 <a class="card-link" href="#">Card link 2</a> 141 <a class="card-link" href="#">Card link 3</a> 142 </div>`); 143 144 auto lgExample = demoBs5Example("listgroup", "List Group", 145 H5Div( 146 BS5Card(["w-50"], 147 BS5List(["list-group-flush"], 148 BS5ListItem("List group item 1"), 149 BS5ListItem("List group item 2"), 150 BS5ListItem("List group item 3"))), 151 H5Br, 152 BS5Card( 153 BS5List(["list-group-flush"], 154 BS5ListItem("List group item 1"), 155 BS5ListItem("List group item 2"), 156 BS5ListItem("List group item 3"))) 157 ), 158 `BS5Card(["w-50"], 159 BS5List(["list-group-flush"], 160 BS5ListItem("List group item 1"), 161 BS5ListItem("List group item 2"), 162 BS5ListItem("List group item 3"))), 163 BS5Card( 164 BS5List(["list-group-flush"], 165 BS5ListItem("List group item 1"), 166 BS5ListItem("List group item 2"), 167 BS5ListItem("List group item 3")))`, 168 ``); 169 170 auto headerExample = demoBs5Example("header", "Header", 171 H5Div( 172 BS5Card(["w-50"], 173 BS5CardHeader("Card header")), 174 H5Br, 175 BS5Card( 176 BS5CardHeader("Card header")) 177 ), 178 `BS5Card(["w-50"], 179 BS5CardHeader("Card header")), 180 BS5Card( 181 BS5CardHeader("Long card header")) 182 `, ``); 183 184 auto footerExample = demoBs5Example("footer", "Footer", 185 H5Div( 186 BS5Card(["w-50"], 187 BS5CardFooter("Created DD-MM-YYYY")), 188 H5Br, 189 BS5Card( 190 BS5CardFooter("Long Footer")) 191 ), 192 `BS5Card(["w-50"], 193 BS5CardFooter("Created DD-MM-YYYY")), 194 BS5Card(["w-50"], 195 BS5CardFooter("Long Footer"))`, 196 ``); 197 198 auto imagesExample = demoBs5Example("images", "Cards with images", 199 H5Div( 200 H5H5(["text-muted", "mt-3"], "Top"), 201 BS5Card(["w-50"], 202 BS5CardImage(["src":"/img/400x200.png", "alt":"Card image in the top"]), 203 BS5CardBody( 204 BS5CardTitle("Card title"), 205 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.") 206 )), 207 H5H5(["text-muted", "mt-3"], "Bottom"), 208 BS5Card(["w-50"], 209 BS5CardBody( 210 BS5CardTitle("Card title"), 211 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")), 212 BS5CardImage(["card-img-bottom"], ["src":"/img/400x200.png", "alt":"Card image in the bottom"]) 213 ), 214 H5H5(["text-muted", "mt-3"], "Overlay"), 215 BS5Card(["w-50"], 216 BS5CardImage(["src":"/img/400x200.png", "alt":"Card image as an overlay"], 217 BS5CardOverlay( 218 BS5CardTitle("Card title"), 219 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.") 220 )))),``, ``); 221 222 auto tabsExample = demoBs5Example("tabs", "Tab navigation", 223 H5Div( 224 BS5Card(["w-50"], 225 BS5CardHeader( 226 BS5Nav(["nav-tabs", "card-header-tabs"], 227 BS5NavItem( 228 BS5NavLink(["active"], ["href":"#"], "Active")), 229 BS5NavItem( 230 BS5NavLink(["href":"#"], "Link")), 231 BS5NavItem( 232 BS5NavLink(["disabled"], ["href":"#"], "Disabled")))), 233 BS5CardBody( 234 BS5CardTitle("Card title"), 235 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.") 236 ))), ``, ``); 237 238 /* 239 240 demoBs5Example("pills", "Pill Navigation", 241 H5Div( 242 BS5Card(["w-50"], 243 BS5CardHeader( 244 BS5Nav(["nav-pills", "card-header-pills"], 245 BS5NavItem( 246 BS5NavLink(["active"], ["href":"#"], "Active")), 247 BS5NavItem( 248 BS5NavLink(["href":"#"], "Link")), 249 BS5NavItem( 250 BS5NavLink(["disabled"], ["href":"#"], "Disabled")))), 251 BS5CardBody( 252 BS5CardTitle("Card title"), 253 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.") 254 ))), ``, ``), 255 256 demoBs5Example("every", "Everything", 257 H5Div( 258 BS5Card(["w-50"], 259 BS5CardHeader( 260 BS5Nav(["nav-pills", "card-header-pills"], 261 BS5NavItem( 262 BS5NavLink(["active"], ["href":"#"], "Active")), 263 BS5NavItem( 264 BS5NavLink(["href":"#"], "Link")), 265 BS5NavItem( 266 BS5NavLink(["disabled"], ["href":"#"], "Disabled")))), 267 BS5CardImage(["src":"/img/400x200.png", "alt":"Card image"]), 268 BS5CardBody( 269 BS5CardTitle("Card title"), 270 BS5CardSubtitle("Card subtitle"), 271 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 272 BS5CardLink(["href":"#"], "Card link"), 273 BS5CardLink(["href":"#"], "Card link"), 274 BS5CardLink(["href":"#"], "Card link"), 275 BS5List(["list-group-flush"], 276 BS5ListItem("List group item"), 277 BS5ListItem("List group item"), 278 BS5ListItem("List group item"))), 279 BS5CardFooter("Created DD-MM-YYYY"))), ``, ``), 280 281 demoBs5Example("background", "Hintergrundfarben", 282 H5Div( 283 BS5Card(["text-white bg-primary w-50 mb-4"], 284 BS5CardBody( 285 BS5CardTitle("Card title"), 286 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 287 BS5ButtonLink(["btn-primary"], "Button"))), 288 BS5Card(["text-white", "bg-secondary", "w-50 mb-4"], 289 BS5CardBody( 290 BS5CardTitle("Card title"), 291 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 292 BS5ButtonLink(["btn-primary"], "Button"))), 293 BS5Card(["text-white bg-success w-50 mb-4"], 294 BS5CardBody( 295 BS5CardTitle("Card title"), 296 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 297 BS5ButtonLink(["btn-primary"], "Button"))), 298 BS5Card(["text-white bg-danger w-50 mb-4"], 299 BS5CardBody( 300 BS5CardTitle("Card title"), 301 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 302 BS5ButtonLink(["btn-primary"], "Button"))), 303 BS5Card(["text-white bg-warning w-50 mb-4"], 304 BS5CardBody( 305 BS5CardTitle("Card title"), 306 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 307 BS5ButtonLink(["btn-primary"], "Button"))), 308 BS5Card(["text-white bg-info w-50 mb-4"], 309 BS5CardBody( 310 BS5CardTitle("Card title"), 311 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 312 BS5ButtonLink(["btn-primary"], "Button"))), 313 BS5Card(["bg-light w-50 mb-4"], 314 BS5CardBody( 315 BS5CardTitle("Card title"), 316 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 317 BS5ButtonLink(["btn-primary"], "Button"))), 318 BS5Card(["text-white bg-dark w-50"], 319 BS5CardBody( 320 BS5CardTitle("Card title"), 321 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 322 BS5ButtonLink(["btn-primary"], "Button")))), ``, ``), 323 324 demoBs5Example("bordertext", "Rahmen- und Textfarben", 325 H5Div( 326 BS5Card(["border-primary w-50 mb-4"], 327 BS5CardBody(["text-primary"], 328 BS5CardTitle("Card title"), 329 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 330 BS5ButtonLink(["btn-primary"], "Button"))), 331 BS5Card(["border-secondary w-50 mb-4"], 332 BS5CardBody(["text-secondary"], 333 BS5CardTitle("Card title"), 334 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 335 BS5ButtonLink(["btn-secondary"], "Button"))), 336 BS5Card(["border-success w-50 mb-4"], 337 BS5CardBody(["text-success"], 338 BS5CardTitle("Card title"), 339 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 340 BS5ButtonLink(["btn-success"], "Button"))), 341 BS5Card(["border-danger w-50 mb-4"], 342 BS5CardBody(["text-danger"], 343 BS5CardTitle("Card title"), 344 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 345 BS5ButtonLink(["btn-danger"], "Button"))), 346 BS5Card(["border-warning w-50 mb-4"], 347 BS5CardBody(["text-warning"], 348 BS5CardTitle("Card title"), 349 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 350 BS5ButtonLink(["btn-warning"], "Button"))), 351 BS5Card(["border-info w-50 mb-4"], 352 BS5CardBody(["text-info"], 353 BS5CardTitle("Card title"), 354 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 355 BS5ButtonLink(["btn-info"], "Button"))), 356 BS5Card(["border-light w-50 mb-4"], 357 BS5CardBody(["bg-dark text-light"], 358 BS5CardTitle("Card title"), 359 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 360 BS5ButtonLink(["btn-light"], "Button"))), 361 BS5Card(["border-dark w-50"], 362 BS5CardBody(["text-dark"], 363 BS5CardTitle("Card title"), 364 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 365 BS5ButtonLink(["btn-dark"], "Button")))), ``, ``), 366 367 demoBs5Example("bordertext", "Header- und Footerfarben", 368 H5Div( 369 BS5Card(["border-info w-50"], 370 BS5CardHeader(["border-info", "bg-transparent"], "Card header"), 371 BS5CardBody( 372 BS5CardTitle("Card title"), 373 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 374 BS5ButtonLink(["btn-info"], "Button")), 375 BS5CardFooter(["border-info", "bg-transparent"], "Created DD-MM-YYYY"))), ``, ``)~ 376 377 demoBs5Example("groups", "Kartengruppen", 378 H5Div( 379 BS5CardGroup(["mb-4"], 380 BS5Card( 381 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 382 BS5CardBody( 383 BS5CardTitle("Card title"), 384 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat."))), 385 BS5Card( 386 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 387 BS5CardBody( 388 BS5CardTitle("Card title"), 389 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 390 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. 391 Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero."))), 392 BS5Card( 393 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 394 BS5CardBody( 395 BS5CardTitle("Card title"), 396 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.")))), 397 BS5CardGroup(["mb-4"], 398 BS5Card( 399 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 400 BS5CardBody( 401 BS5CardTitle("Card title"), 402 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat.")), 403 BS5CardFooter("Created DD-MM-YYYY")), 404 BS5Card( 405 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 406 BS5CardBody( 407 BS5CardTitle("Card title"), 408 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero.")), 409 BS5CardFooter("Created DD-MM-YYYY")), 410 BS5Card( 411 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 412 BS5CardBody( 413 BS5CardTitle("Card title"), 414 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.")), 415 BS5CardFooter("Created DD-MM-YYYY")))), ``, ``), 416 417 demoBs5Example("grid", "Grids Cards", 418 H5Div( 419 H5H5(["text-muted", "mt-3"], "Default"), 420 BS5Row(["row-cols-1", "row-cols-md-2", "row-cols-xl-3", "row-cols-xxl-4", "g-4 mb-4"], 421 BS5Col( 422 BS5Card( 423 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 424 BS5CardBody( 425 BS5CardTitle("Card title"), 426 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. 427 Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 428 Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. 429 Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. 430 Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. 431 Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")))), 432 BS5Col( 433 BS5Card( 434 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 435 BS5CardBody( 436 BS5CardTitle("Card title"), 437 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 438 Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in.")))), 439 BS5Col( 440 BS5Card( 441 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 442 BS5CardBody( 443 BS5CardTitle("Card title"), 444 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit.")))), 445 BS5Col( 446 BS5Card( 447 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 448 BS5CardBody( 449 BS5CardTitle("Card title"), 450 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")))))), ``, ``), 451 452 demoBs5Example("equal", "Gleichohe Karten", 453 BS5Row(["row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4"], 454 BS5Col( 455 BS5Card(["h-100"], 456 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 457 BS5CardBody( 458 BS5CardTitle("Card title"), 459 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. 460 Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")))), 461 BS5Col( 462 BS5Card(["h-100"], 463 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 464 BS5CardBody( 465 BS5CardTitle("Card title"), 466 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 467 Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in.")))), 468 BS5Col( 469 BS5Card(["h-100"], 470 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 471 BS5CardBody( 472 BS5CardTitle("Card title"), 473 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit.")))), 474 BS5Col( 475 BS5Card(["h-100"], 476 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 477 BS5CardBody( 478 BS5CardTitle("Card title"), 479 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit."))))), ``, ``), 480 481 demoBs5Example("footer", "Mit Footer", 482 BS5Row(["row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4"], 483 BS5Col( 484 BS5Card(["h-100"], 485 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 486 BS5CardBody( 487 BS5CardTitle("Card title"), 488 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 489 Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. 490 Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. 491 Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 492 BS5CardFooter("Created DD-MM-YYYY"))), 493 BS5Col( 494 BS5Card(["h-100"], 495 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 496 BS5CardBody( 497 BS5CardTitle("Card title"), 498 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 499 Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in.")), 500 BS5CardFooter("Created DD-MM-YYYY"))), 501 BS5Col( 502 BS5Card(["h-100"], 503 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 504 BS5CardBody( 505 BS5CardTitle("Card title"), 506 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit.")), 507 BS5CardFooter("Created DD-MM-YYYY"))), 508 BS5Col( 509 BS5Card(["h-100"], 510 BS5CardImage(["src":"/img/300x150.png", "alt":"Card image"]), 511 BS5CardBody( 512 BS5CardTitle("Card title"), 513 BS5CardText("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")), 514 BS5CardFooter("Created DD-MM-YYYY")))), ``, ``) 515 ), 516 H5Div(["col-12", "col-lg-2"]) */ 517 return 518 H5Main(["style":"margin-top:70px;"], 519 H5Div(["container-fluid", "mt-3", "bg-light"], 520 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 521 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Cards")), 522 BS5Container(["mt-3"]).row( 523 H5Div(["col-12", "col-lg-2"], 524 listLevels("basic"), 525 listAreas("basic", "components"), 526 listSections("basic", "components", "cards")), 527 H5Div(["col-12", "col-lg-8"], 528 dateInfo(this), 529 H5H2(H5Small("Bootstrap 5 Demo "), H5String("Using Cards")), 530 H5Hr, 531 532 textExample, 533 titleExample, 534 subtitleExample, 535 buttonExample, 536 linksExample, 537 lgExample, 538 headerExample, 539 footerExample, 540 imagesExample, 541 tabsExample 542 543 ), 544 H5Div(["col-12", "col-lg-2"]))).toString; 545 } 546 }); 547 } 548 549 550 /* 551 Cards, ein Element für viele Anlässe 552 Wenn Sie in diesem Bereich bestimmte Zeilen im Transkript auswählen, wird die zugehörige Zeitmarke im Video angesteuert. 553 Cards sind ein Element innerhalb von Bootstrap, um genau zu sein eine Komponente, die in sich jetzt eine größere Anzahl an ehemaligen Komponenten vereint und dementsprechend umfangreich ist das Thema Card in Wirklichkeit. Ich habe jetzt hier in einer älteren Version einen Bereich auf meiner Seite, wo einfach drei Absätze jetzt im Moment noch untereinander liegen, die ich in Cards umbaue, beziehungsweise die ich schon in Cards umgebaut habe, um Ihnen die Funktionsweise von Cards in Aktion zu zeigen. Wenn sie selbst sich über Cards schlau machen wollen, dann finden sie unter den Komponenten, „Components“ den Eintrag „Card“ und dadurch, dass die Cards sich eben eine größere Anzahl anderer Elemente ersetzt haben, finden Sie auf der rechten Seite diese Menge an Möglichkeiten, die sie mit Cards ausführen können. Sie können in Ruhe sich es durchschauen und durchscrollen. Meine momentane Lösung sieht auf jeden Fall so aus. Das heißt, aus diesen drei Absätzen sind jetzt drei nebeneinanderliegende Karten geworden. Und das einzige was ich jetzt noch bei allen drei Karten hinzufügen möchte ist ein Bild im Kopfbereich, das über die gesamte Länge geht. Aber zuerst sehen wir uns mal an, was überhaupt da ist und abgesehen jetzt von dem umfassenden Container, der das Row-Element in sich beherbergt und den einzelnen Spalten-Einträgen haben wir jetzt eben einen zusätzlichen Behälter der die Klasse „card“ trägt und der für diesen Rahmen und diesen abgerundeten Rand zuständig ist und dann haben wir einen „card-body“, der seinerseits jetzt für ein gewisses Padding gegenüber dem übergeordneten Element zuständig ist und dann haben wir noch einen eigenen kleinen Absatz der „card-title“ heißt, ich habe hier jetzt eben keine Überschriftsebene mehr, sondern ich verwende nur den „card-title“, der nichts anderes tut als etwas Abstand zwischen dem Titel und dem normalen Fließtext zu schaffen und im Fließtext könnte ich jetzt noch die Klasse „card-text“ mitgeben, was ich jetzt aber nicht mache, weil es für meinen Bedarf hier nicht notwendig ist. Und das habe ich bei allen drei Absätzen gemacht, womit ich jetzt eben zum gerade gezeigten Ergebnis gekommen bin. Wenn ich jetzt noch ein Bild einfügen möchte, so hier auf dieser Ebene, so ist das einzige was ich beim Einfügen des Bilds beachten muss, die Art wo ich es einfüge. Und zwar das Bild, ich hole mir das jetzt als Vorlage mit „Strg+C“ in meine Zwischenablage, muss aber oberhalb vom „card-body“ zu liegen kommen, damit es nicht ebenfalls mit diesem Padding versehen wird, das eben die Aufgabe des „card-body“ ist. Okay, ich habe das schon in der Zwischenablage, das heißt ich wechsle jetzt zurück zu meiner höchst eigenen Karte und werde genau hier jetzt dieses Image einfügen. Das Image hat eine eigene Klasse „card-img-top“, das dafür sorgt, dass das Bild sich dann auch passend verhält und ich muss jetzt eigentlich nur noch in mein Bildverzeichnis gehen und ein passendes Bild aussuchen. Und vielleicht hier auch noch den Alternativtext ändern. Okay, und dasselbe mache ich jetzt noch mal hier mit der zweiten Karte, indem ich wieder ein Bild einfüge und dieses Mal verzichte ich jetzt auf den Alternativtext. Wir wissen, dass er wichtig ist und ein drittes Mal auch noch hier. Mit meinem Treppenbild, das Feld C. So, und einfach nur durch dieses Verwenden der Klasse „card-img-top“ und mit der Positionierung oberhalb vom „card-body“, wenn ich das Ganze speichere und mir jetzt meine Karten wieder ausgeben lasse, sorgt dafür, dass die Bilder sich perfekt eingliedern in diese Karte und die Karte so gesehen auch ziemlich gut aufpeppen. Und so können Sie mit etwas mehr Markup aber trotzdem recht wenig Aufwand mit Hilfe von Cards, in sich abgeschlossene Informationseinheiten erzeugen. 554 */