├── README.md ├── RELEASE-NOTES.md ├── bower.json ├── card.css ├── card.min.css ├── composer.json ├── package.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # Semantic Card 2 | 3 | This repository contains pre-compiled card files using the default themes. This is intended for use in projects that do not need all the bells and whistles of Semantic UI, and want to keep file size to a minimum. 4 | 5 | For the latest changes please see the [Release Notes](https://github.com/Semantic-Org/UI-Card/blob/master/RELEASE-NOTES.md) 6 | 7 | **Special Note** 8 | An update in `2.0.8` has fixed an issue which may have prevented some single component modules from working correctly. Please see notes in [this pull request](https://github.com/Semantic-Org/Semantic-UI/pull/2816). 9 | 10 | If you're looking for the full version of Semantic including all components and build tools [check out the main project repository](https://github.com/Semantic-Org/Semantic-UI/tree/1.0) 11 | 12 | #### To install with Bower 13 | ``` 14 | bower install semantic-ui-card 15 | ``` 16 | 17 | #### To install with NPM 18 | ``` 19 | npm install semantic-ui-card 20 | ``` 21 | 22 | #### To install with Meteor 23 | ``` 24 | meteor add semantic:ui-card 25 | ``` 26 | 27 | 28 | ## Addendum 29 | 30 | This element's definitions (required class names, html structures) are available in the [UI Docs](http://www.semantic-ui.com) 31 | 32 | Please consider checking out [all the benefits to theming](http://www.learnsemantic.com/guide/expert.html) before using these stand-alone releases. 33 | -------------------------------------------------------------------------------- /RELEASE-NOTES.md: -------------------------------------------------------------------------------- 1 | ### Version 2.2.10 - March 28, 2017 2 | 3 | -**Form** - Credit card validation now no longer fails validation with dashed credit card values #5122 **Thanks @neokio** 4 | 5 | ### Version 2.2.0 - June 26, 2016 6 | 7 | - **Card** - Added `raised` card variation **Thanks @yordis** [#2955](https://github.com/Semantic-Org/Semantic-UI/issues/2955) 8 | 9 | #### Features 10 | 11 | - **Cards** - Added documentation for `stackable` cards which was available but undocumented in previous versions. 12 | - **Form Validation** - Added credit card validation, supports array of card types, and international cards including non luhn cards like China UnionPay [#2729](https://github.com/Semantic-Org/Semantic-UI/issues/2729) 13 | 14 | ### Version 2.0.1 - July 6, 2015 15 | 16 | - **Card** - `centered cards` variation now works similar to `centered card`. [#2520](https://github.com/Semantic-Org/Semantic-UI/issues/2520) 17 | 18 | ### Version 2.0.0 - June 30, 2015 19 | 20 | - **Card** - Cards now support multiple custom `content` blocks. Content blocks and images can now appear in any order. 21 | - **Card** - Card now includes a `centered` variation 22 | - **Card** - IE11 now can correctly use `flexbox` cards **Thanks @Widcket** 23 | - **Card** - Card styles have been adjusted, `link card` now raise to show selection. Colored variations now have shadows. 24 | 25 | ### Version 1.11.7 - April 13, 2015 26 | 27 | - **Card** - Fixes card `flex` display issues in IE 28 | 29 | ### Version 1.11.5 - March 23, 2015 30 | 31 | - **Card** - Fixes dimmer background shorthand property causes transparent dimmer in minified version 32 | 33 | ### Version 1.11.2 - March 6, 2015 34 | 35 | - **Card/Dimmer** - Fix dimmer z-index being too high when inside a `ui card`. Added variable for specifying default dimmer color inside card. 36 | 37 | ### Version 1.10.0 - February 23, 2015 38 | 39 | - **Cards** - Fix `.ui.cards > .ui.card` margins to match `.ui.cards > .card` margins 40 | - **Cards** - Fix consecutive card groups to preserve row flow (similar to consecutive grids) 41 | 42 | ### UI Changes 43 | 44 | - **Card** - Cards now equalize height by default using `display: flex`. No longer are card heights required to be specified manually to align 45 | - **Card** - Card now has colored variations **Thanks @romuloctba** 46 | - **Label** - `ribbon label` can now be used inside `ui image` and `ui card` correctly 47 | - **Card** - Star / Like button colors have been fixed to match `ui rating` inside `card` 48 | - **Card** - Hiding a card with `display: none` no longer causes layout issues with `(x) cards` 49 | - **Card** - `image` inside `content` no longer has a fixed size **Thanks @romuloctba** 50 | 51 | ### Version 1.2.0 - December 08, 2014 52 | 53 | - **Item/Card** - Default link formatting inside element simplified to avoid adjusting other nested ``ui`` link styles 54 | 55 | ### Version 1.0.1 - November 28, 2014 56 | 57 | - **Card/Item** - Fix generic link stylings erroneously affecting linked ui elements like buttons 58 | 59 | ### Version 1.0.0 - November 24, 2014 60 | 61 | - **Item** - 0.x.x's UI card has been adjusted heavily. Vertically listed content should use ``ui item`` while floated grouped content should continue to use ``ui card``. Some 'card' view content has been slightly adjusted. Please refer to documentation 62 | 63 | ### Version 0.1.0 - Sep 25, 2013 -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic-ui-card", 3 | "description": "Card - Semantic UI", 4 | "homepage": "http://www.semantic-ui.com", 5 | "author": { 6 | "name": "Jack Lukic", 7 | "web": "http://www.jacklukic.com" 8 | }, 9 | "ignore": ["docs", "node", "server", "spec", "src", "test"], 10 | "keywords": ["semantic", "ui", "css3", "framework"], 11 | "license": ["http://semantic-ui.mit-license.org/"], 12 | "main": ["card.css"] 13 | } -------------------------------------------------------------------------------- /card.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI 2.4.1 - Item 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | /******************************* 13 | Standard 14 | *******************************/ 15 | 16 | 17 | /*-------------- 18 | Card 19 | ---------------*/ 20 | 21 | .ui.cards > .card, 22 | .ui.card { 23 | max-width: 100%; 24 | position: relative; 25 | display: -webkit-box; 26 | display: -ms-flexbox; 27 | display: flex; 28 | -webkit-box-orient: vertical; 29 | -webkit-box-direction: normal; 30 | -ms-flex-direction: column; 31 | flex-direction: column; 32 | width: 290px; 33 | min-height: 0px; 34 | background: #FFFFFF; 35 | padding: 0em; 36 | border: none; 37 | border-radius: 0.28571429rem; 38 | -webkit-box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; 39 | box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; 40 | -webkit-transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; 41 | transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; 42 | transition: box-shadow 0.1s ease, transform 0.1s ease; 43 | transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; 44 | z-index: ''; 45 | } 46 | .ui.card { 47 | margin: 1em 0em; 48 | } 49 | .ui.cards > .card a, 50 | .ui.card a { 51 | cursor: pointer; 52 | } 53 | .ui.card:first-child { 54 | margin-top: 0em; 55 | } 56 | .ui.card:last-child { 57 | margin-bottom: 0em; 58 | } 59 | 60 | /*-------------- 61 | Cards 62 | ---------------*/ 63 | 64 | .ui.cards { 65 | display: -webkit-box; 66 | display: -ms-flexbox; 67 | display: flex; 68 | margin: -0.875em -0.5em; 69 | -ms-flex-wrap: wrap; 70 | flex-wrap: wrap; 71 | } 72 | .ui.cards > .card { 73 | display: -webkit-box; 74 | display: -ms-flexbox; 75 | display: flex; 76 | margin: 0.875em 0.5em; 77 | float: none; 78 | } 79 | 80 | /* Clearing */ 81 | .ui.cards:after, 82 | .ui.card:after { 83 | display: block; 84 | content: ' '; 85 | height: 0px; 86 | clear: both; 87 | overflow: hidden; 88 | visibility: hidden; 89 | } 90 | 91 | /* Consecutive Card Groups Preserve Row Spacing */ 92 | .ui.cards ~ .ui.cards { 93 | margin-top: 0.875em; 94 | } 95 | 96 | /*-------------- 97 | Rounded Edges 98 | ---------------*/ 99 | 100 | .ui.cards > .card > :first-child, 101 | .ui.card > :first-child { 102 | border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; 103 | border-top: none !important; 104 | } 105 | .ui.cards > .card > :last-child, 106 | .ui.card > :last-child { 107 | border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; 108 | } 109 | .ui.cards > .card > :only-child, 110 | .ui.card > :only-child { 111 | border-radius: 0.28571429rem !important; 112 | } 113 | 114 | /*-------------- 115 | Images 116 | ---------------*/ 117 | 118 | .ui.cards > .card > .image, 119 | .ui.card > .image { 120 | position: relative; 121 | display: block; 122 | -webkit-box-flex: 0; 123 | -ms-flex: 0 0 auto; 124 | flex: 0 0 auto; 125 | padding: 0em; 126 | background: rgba(0, 0, 0, 0.05); 127 | } 128 | .ui.cards > .card > .image > img, 129 | .ui.card > .image > img { 130 | display: block; 131 | width: 100%; 132 | height: auto; 133 | border-radius: inherit; 134 | } 135 | .ui.cards > .card > .image:not(.ui) > img, 136 | .ui.card > .image:not(.ui) > img { 137 | border: none; 138 | } 139 | 140 | /*-------------- 141 | Content 142 | ---------------*/ 143 | 144 | .ui.cards > .card > .content, 145 | .ui.card > .content { 146 | -webkit-box-flex: 1; 147 | -ms-flex-positive: 1; 148 | flex-grow: 1; 149 | border: none; 150 | border-top: 1px solid rgba(34, 36, 38, 0.1); 151 | background: none; 152 | margin: 0em; 153 | padding: 1em 1em; 154 | -webkit-box-shadow: none; 155 | box-shadow: none; 156 | font-size: 1em; 157 | border-radius: 0em; 158 | } 159 | .ui.cards > .card > .content:after, 160 | .ui.card > .content:after { 161 | display: block; 162 | content: ' '; 163 | height: 0px; 164 | clear: both; 165 | overflow: hidden; 166 | visibility: hidden; 167 | } 168 | .ui.cards > .card > .content > .header, 169 | .ui.card > .content > .header { 170 | display: block; 171 | margin: ''; 172 | font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; 173 | color: rgba(0, 0, 0, 0.85); 174 | } 175 | 176 | /* Default Header Size */ 177 | .ui.cards > .card > .content > .header:not(.ui), 178 | .ui.card > .content > .header:not(.ui) { 179 | font-weight: bold; 180 | font-size: 1.28571429em; 181 | margin-top: -0.21425em; 182 | line-height: 1.28571429em; 183 | } 184 | .ui.cards > .card > .content > .meta + .description, 185 | .ui.cards > .card > .content > .header + .description, 186 | .ui.card > .content > .meta + .description, 187 | .ui.card > .content > .header + .description { 188 | margin-top: 0.5em; 189 | } 190 | 191 | /*---------------- 192 | Floated Content 193 | -----------------*/ 194 | 195 | .ui.cards > .card [class*="left floated"], 196 | .ui.card [class*="left floated"] { 197 | float: left; 198 | } 199 | .ui.cards > .card [class*="right floated"], 200 | .ui.card [class*="right floated"] { 201 | float: right; 202 | } 203 | 204 | /*-------------- 205 | Aligned 206 | ---------------*/ 207 | 208 | .ui.cards > .card [class*="left aligned"], 209 | .ui.card [class*="left aligned"] { 210 | text-align: left; 211 | } 212 | .ui.cards > .card [class*="center aligned"], 213 | .ui.card [class*="center aligned"] { 214 | text-align: center; 215 | } 216 | .ui.cards > .card [class*="right aligned"], 217 | .ui.card [class*="right aligned"] { 218 | text-align: right; 219 | } 220 | 221 | /*-------------- 222 | Content Image 223 | ---------------*/ 224 | 225 | .ui.cards > .card .content img, 226 | .ui.card .content img { 227 | display: inline-block; 228 | vertical-align: middle; 229 | width: ''; 230 | } 231 | .ui.cards > .card img.avatar, 232 | .ui.cards > .card .avatar img, 233 | .ui.card img.avatar, 234 | .ui.card .avatar img { 235 | width: 2em; 236 | height: 2em; 237 | border-radius: 500rem; 238 | } 239 | 240 | /*-------------- 241 | Description 242 | ---------------*/ 243 | 244 | .ui.cards > .card > .content > .description, 245 | .ui.card > .content > .description { 246 | clear: both; 247 | color: rgba(0, 0, 0, 0.68); 248 | } 249 | 250 | /*-------------- 251 | Paragraph 252 | ---------------*/ 253 | 254 | .ui.cards > .card > .content p, 255 | .ui.card > .content p { 256 | margin: 0em 0em 0.5em; 257 | } 258 | .ui.cards > .card > .content p:last-child, 259 | .ui.card > .content p:last-child { 260 | margin-bottom: 0em; 261 | } 262 | 263 | /*-------------- 264 | Meta 265 | ---------------*/ 266 | 267 | .ui.cards > .card .meta, 268 | .ui.card .meta { 269 | font-size: 1em; 270 | color: rgba(0, 0, 0, 0.4); 271 | } 272 | .ui.cards > .card .meta *, 273 | .ui.card .meta * { 274 | margin-right: 0.3em; 275 | } 276 | .ui.cards > .card .meta :last-child, 277 | .ui.card .meta :last-child { 278 | margin-right: 0em; 279 | } 280 | .ui.cards > .card .meta [class*="right floated"], 281 | .ui.card .meta [class*="right floated"] { 282 | margin-right: 0em; 283 | margin-left: 0.3em; 284 | } 285 | 286 | /*-------------- 287 | Links 288 | ---------------*/ 289 | 290 | 291 | /* Generic */ 292 | .ui.cards > .card > .content a:not(.ui), 293 | .ui.card > .content a:not(.ui) { 294 | color: ''; 295 | -webkit-transition: color 0.1s ease; 296 | transition: color 0.1s ease; 297 | } 298 | .ui.cards > .card > .content a:not(.ui):hover, 299 | .ui.card > .content a:not(.ui):hover { 300 | color: ''; 301 | } 302 | 303 | /* Header */ 304 | .ui.cards > .card > .content > a.header, 305 | .ui.card > .content > a.header { 306 | color: rgba(0, 0, 0, 0.85); 307 | } 308 | .ui.cards > .card > .content > a.header:hover, 309 | .ui.card > .content > a.header:hover { 310 | color: #1e70bf; 311 | } 312 | 313 | /* Meta */ 314 | .ui.cards > .card .meta > a:not(.ui), 315 | .ui.card .meta > a:not(.ui) { 316 | color: rgba(0, 0, 0, 0.4); 317 | } 318 | .ui.cards > .card .meta > a:not(.ui):hover, 319 | .ui.card .meta > a:not(.ui):hover { 320 | color: rgba(0, 0, 0, 0.87); 321 | } 322 | 323 | /*-------------- 324 | Buttons 325 | ---------------*/ 326 | 327 | .ui.cards > .card > .buttons, 328 | .ui.card > .buttons, 329 | .ui.cards > .card > .button, 330 | .ui.card > .button { 331 | margin: 0px -1px; 332 | width: calc(100% + 2px ); 333 | } 334 | 335 | /*-------------- 336 | Dimmer 337 | ---------------*/ 338 | 339 | .ui.cards > .card .dimmer, 340 | .ui.card .dimmer { 341 | background-color: ''; 342 | z-index: 10; 343 | } 344 | 345 | /*-------------- 346 | Labels 347 | ---------------*/ 348 | 349 | 350 | /*-----Star----- */ 351 | 352 | 353 | /* Icon */ 354 | .ui.cards > .card > .content .star.icon, 355 | .ui.card > .content .star.icon { 356 | cursor: pointer; 357 | opacity: 0.75; 358 | -webkit-transition: color 0.1s ease; 359 | transition: color 0.1s ease; 360 | } 361 | .ui.cards > .card > .content .star.icon:hover, 362 | .ui.card > .content .star.icon:hover { 363 | opacity: 1; 364 | color: #FFB70A; 365 | } 366 | .ui.cards > .card > .content .active.star.icon, 367 | .ui.card > .content .active.star.icon { 368 | color: #FFE623; 369 | } 370 | 371 | /*-----Like----- */ 372 | 373 | 374 | /* Icon */ 375 | .ui.cards > .card > .content .like.icon, 376 | .ui.card > .content .like.icon { 377 | cursor: pointer; 378 | opacity: 0.75; 379 | -webkit-transition: color 0.1s ease; 380 | transition: color 0.1s ease; 381 | } 382 | .ui.cards > .card > .content .like.icon:hover, 383 | .ui.card > .content .like.icon:hover { 384 | opacity: 1; 385 | color: #FF2733; 386 | } 387 | .ui.cards > .card > .content .active.like.icon, 388 | .ui.card > .content .active.like.icon { 389 | color: #FF2733; 390 | } 391 | 392 | /*---------------- 393 | Extra Content 394 | -----------------*/ 395 | 396 | .ui.cards > .card > .extra, 397 | .ui.card > .extra { 398 | max-width: 100%; 399 | min-height: 0em !important; 400 | -webkit-box-flex: 0; 401 | -ms-flex-positive: 0; 402 | flex-grow: 0; 403 | border-top: 1px solid rgba(0, 0, 0, 0.05) !important; 404 | position: static; 405 | background: none; 406 | width: auto; 407 | margin: 0em 0em; 408 | padding: 0.75em 1em; 409 | top: 0em; 410 | left: 0em; 411 | color: rgba(0, 0, 0, 0.4); 412 | -webkit-box-shadow: none; 413 | box-shadow: none; 414 | -webkit-transition: color 0.1s ease; 415 | transition: color 0.1s ease; 416 | } 417 | .ui.cards > .card > .extra a:not(.ui), 418 | .ui.card > .extra a:not(.ui) { 419 | color: rgba(0, 0, 0, 0.4); 420 | } 421 | .ui.cards > .card > .extra a:not(.ui):hover, 422 | .ui.card > .extra a:not(.ui):hover { 423 | color: #1e70bf; 424 | } 425 | 426 | 427 | /******************************* 428 | Variations 429 | *******************************/ 430 | 431 | 432 | /*------------------- 433 | Raised 434 | --------------------*/ 435 | 436 | .ui.raised.cards > .card, 437 | .ui.raised.card { 438 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); 439 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); 440 | } 441 | .ui.raised.cards a.card:hover, 442 | .ui.link.cards .raised.card:hover, 443 | a.ui.raised.card:hover, 444 | .ui.link.raised.card:hover { 445 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); 446 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); 447 | } 448 | .ui.raised.cards > .card, 449 | .ui.raised.card { 450 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); 451 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); 452 | } 453 | 454 | /*------------------- 455 | Centered 456 | --------------------*/ 457 | 458 | .ui.centered.cards { 459 | -webkit-box-pack: center; 460 | -ms-flex-pack: center; 461 | justify-content: center; 462 | } 463 | .ui.centered.card { 464 | margin-left: auto; 465 | margin-right: auto; 466 | } 467 | 468 | /*------------------- 469 | Fluid 470 | --------------------*/ 471 | 472 | .ui.fluid.card { 473 | width: 100%; 474 | max-width: 9999px; 475 | } 476 | 477 | /*------------------- 478 | Link 479 | --------------------*/ 480 | 481 | .ui.cards a.card, 482 | .ui.link.cards .card, 483 | a.ui.card, 484 | .ui.link.card { 485 | -webkit-transform: none; 486 | transform: none; 487 | } 488 | .ui.cards a.card:hover, 489 | .ui.link.cards .card:hover, 490 | a.ui.card:hover, 491 | .ui.link.card:hover { 492 | cursor: pointer; 493 | z-index: 5; 494 | background: #FFFFFF; 495 | border: none; 496 | -webkit-box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; 497 | box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; 498 | -webkit-transform: translateY(-3px); 499 | transform: translateY(-3px); 500 | } 501 | 502 | /*------------------- 503 | Colors 504 | --------------------*/ 505 | 506 | 507 | /* Red */ 508 | .ui.red.cards > .card, 509 | .ui.cards > .red.card, 510 | .ui.red.card { 511 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5; 512 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5; 513 | } 514 | .ui.red.cards > .card:hover, 515 | .ui.cards > .red.card:hover, 516 | .ui.red.card:hover { 517 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD; 518 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD; 519 | } 520 | 521 | /* Orange */ 522 | .ui.orange.cards > .card, 523 | .ui.cards > .orange.card, 524 | .ui.orange.card { 525 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5; 526 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5; 527 | } 528 | .ui.orange.cards > .card:hover, 529 | .ui.cards > .orange.card:hover, 530 | .ui.orange.card:hover { 531 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD; 532 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD; 533 | } 534 | 535 | /* Yellow */ 536 | .ui.yellow.cards > .card, 537 | .ui.cards > .yellow.card, 538 | .ui.yellow.card { 539 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5; 540 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5; 541 | } 542 | .ui.yellow.cards > .card:hover, 543 | .ui.cards > .yellow.card:hover, 544 | .ui.yellow.card:hover { 545 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD; 546 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD; 547 | } 548 | 549 | /* Olive */ 550 | .ui.olive.cards > .card, 551 | .ui.cards > .olive.card, 552 | .ui.olive.card { 553 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; 554 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; 555 | } 556 | .ui.olive.cards > .card:hover, 557 | .ui.cards > .olive.card:hover, 558 | .ui.olive.card:hover { 559 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; 560 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; 561 | } 562 | 563 | /* Green */ 564 | .ui.green.cards > .card, 565 | .ui.cards > .green.card, 566 | .ui.green.card { 567 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5; 568 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5; 569 | } 570 | .ui.green.cards > .card:hover, 571 | .ui.cards > .green.card:hover, 572 | .ui.green.card:hover { 573 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD; 574 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD; 575 | } 576 | 577 | /* Teal */ 578 | .ui.teal.cards > .card, 579 | .ui.cards > .teal.card, 580 | .ui.teal.card { 581 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5; 582 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5; 583 | } 584 | .ui.teal.cards > .card:hover, 585 | .ui.cards > .teal.card:hover, 586 | .ui.teal.card:hover { 587 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD; 588 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD; 589 | } 590 | 591 | /* Blue */ 592 | .ui.blue.cards > .card, 593 | .ui.cards > .blue.card, 594 | .ui.blue.card { 595 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5; 596 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5; 597 | } 598 | .ui.blue.cards > .card:hover, 599 | .ui.cards > .blue.card:hover, 600 | .ui.blue.card:hover { 601 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD; 602 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD; 603 | } 604 | 605 | /* Violet */ 606 | .ui.violet.cards > .card, 607 | .ui.cards > .violet.card, 608 | .ui.violet.card { 609 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5; 610 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5; 611 | } 612 | .ui.violet.cards > .card:hover, 613 | .ui.cards > .violet.card:hover, 614 | .ui.violet.card:hover { 615 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD; 616 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD; 617 | } 618 | 619 | /* Purple */ 620 | .ui.purple.cards > .card, 621 | .ui.cards > .purple.card, 622 | .ui.purple.card { 623 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5; 624 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5; 625 | } 626 | .ui.purple.cards > .card:hover, 627 | .ui.cards > .purple.card:hover, 628 | .ui.purple.card:hover { 629 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD; 630 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD; 631 | } 632 | 633 | /* Pink */ 634 | .ui.pink.cards > .card, 635 | .ui.cards > .pink.card, 636 | .ui.pink.card { 637 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5; 638 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5; 639 | } 640 | .ui.pink.cards > .card:hover, 641 | .ui.cards > .pink.card:hover, 642 | .ui.pink.card:hover { 643 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD; 644 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD; 645 | } 646 | 647 | /* Brown */ 648 | .ui.brown.cards > .card, 649 | .ui.cards > .brown.card, 650 | .ui.brown.card { 651 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5; 652 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5; 653 | } 654 | .ui.brown.cards > .card:hover, 655 | .ui.cards > .brown.card:hover, 656 | .ui.brown.card:hover { 657 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD; 658 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD; 659 | } 660 | 661 | /* Grey */ 662 | .ui.grey.cards > .card, 663 | .ui.cards > .grey.card, 664 | .ui.grey.card { 665 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5; 666 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5; 667 | } 668 | .ui.grey.cards > .card:hover, 669 | .ui.cards > .grey.card:hover, 670 | .ui.grey.card:hover { 671 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD; 672 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD; 673 | } 674 | 675 | /* Black */ 676 | .ui.black.cards > .card, 677 | .ui.cards > .black.card, 678 | .ui.black.card { 679 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5; 680 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5; 681 | } 682 | .ui.black.cards > .card:hover, 683 | .ui.cards > .black.card:hover, 684 | .ui.black.card:hover { 685 | -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD; 686 | box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD; 687 | } 688 | 689 | /*-------------- 690 | Card Count 691 | ---------------*/ 692 | 693 | .ui.one.cards { 694 | margin-left: 0em; 695 | margin-right: 0em; 696 | } 697 | .ui.one.cards > .card { 698 | width: 100%; 699 | } 700 | .ui.two.cards { 701 | margin-left: -1em; 702 | margin-right: -1em; 703 | } 704 | .ui.two.cards > .card { 705 | width: calc( 50% - 2em ); 706 | margin-left: 1em; 707 | margin-right: 1em; 708 | } 709 | .ui.three.cards { 710 | margin-left: -1em; 711 | margin-right: -1em; 712 | } 713 | .ui.three.cards > .card { 714 | width: calc( 33.33333333% - 2em ); 715 | margin-left: 1em; 716 | margin-right: 1em; 717 | } 718 | .ui.four.cards { 719 | margin-left: -0.75em; 720 | margin-right: -0.75em; 721 | } 722 | .ui.four.cards > .card { 723 | width: calc( 25% - 1.5em ); 724 | margin-left: 0.75em; 725 | margin-right: 0.75em; 726 | } 727 | .ui.five.cards { 728 | margin-left: -0.75em; 729 | margin-right: -0.75em; 730 | } 731 | .ui.five.cards > .card { 732 | width: calc( 20% - 1.5em ); 733 | margin-left: 0.75em; 734 | margin-right: 0.75em; 735 | } 736 | .ui.six.cards { 737 | margin-left: -0.75em; 738 | margin-right: -0.75em; 739 | } 740 | .ui.six.cards > .card { 741 | width: calc( 16.66666667% - 1.5em ); 742 | margin-left: 0.75em; 743 | margin-right: 0.75em; 744 | } 745 | .ui.seven.cards { 746 | margin-left: -0.5em; 747 | margin-right: -0.5em; 748 | } 749 | .ui.seven.cards > .card { 750 | width: calc( 14.28571429% - 1em ); 751 | margin-left: 0.5em; 752 | margin-right: 0.5em; 753 | } 754 | .ui.eight.cards { 755 | margin-left: -0.5em; 756 | margin-right: -0.5em; 757 | } 758 | .ui.eight.cards > .card { 759 | width: calc( 12.5% - 1em ); 760 | margin-left: 0.5em; 761 | margin-right: 0.5em; 762 | font-size: 11px; 763 | } 764 | .ui.nine.cards { 765 | margin-left: -0.5em; 766 | margin-right: -0.5em; 767 | } 768 | .ui.nine.cards > .card { 769 | width: calc( 11.11111111% - 1em ); 770 | margin-left: 0.5em; 771 | margin-right: 0.5em; 772 | font-size: 10px; 773 | } 774 | .ui.ten.cards { 775 | margin-left: -0.5em; 776 | margin-right: -0.5em; 777 | } 778 | .ui.ten.cards > .card { 779 | width: calc( 10% - 1em ); 780 | margin-left: 0.5em; 781 | margin-right: 0.5em; 782 | } 783 | 784 | /*------------------- 785 | Doubling 786 | --------------------*/ 787 | 788 | 789 | /* Mobile Only */ 790 | @media only screen and (max-width: 767px) { 791 | .ui.two.doubling.cards { 792 | margin-left: 0em; 793 | margin-right: 0em; 794 | } 795 | .ui.two.doubling.cards > .card { 796 | width: 100%; 797 | margin-left: 0em; 798 | margin-right: 0em; 799 | } 800 | .ui.three.doubling.cards { 801 | margin-left: -1em; 802 | margin-right: -1em; 803 | } 804 | .ui.three.doubling.cards > .card { 805 | width: calc( 50% - 2em ); 806 | margin-left: 1em; 807 | margin-right: 1em; 808 | } 809 | .ui.four.doubling.cards { 810 | margin-left: -1em; 811 | margin-right: -1em; 812 | } 813 | .ui.four.doubling.cards > .card { 814 | width: calc( 50% - 2em ); 815 | margin-left: 1em; 816 | margin-right: 1em; 817 | } 818 | .ui.five.doubling.cards { 819 | margin-left: -1em; 820 | margin-right: -1em; 821 | } 822 | .ui.five.doubling.cards > .card { 823 | width: calc( 50% - 2em ); 824 | margin-left: 1em; 825 | margin-right: 1em; 826 | } 827 | .ui.six.doubling.cards { 828 | margin-left: -1em; 829 | margin-right: -1em; 830 | } 831 | .ui.six.doubling.cards > .card { 832 | width: calc( 50% - 2em ); 833 | margin-left: 1em; 834 | margin-right: 1em; 835 | } 836 | .ui.seven.doubling.cards { 837 | margin-left: -1em; 838 | margin-right: -1em; 839 | } 840 | .ui.seven.doubling.cards > .card { 841 | width: calc( 33.33333333% - 2em ); 842 | margin-left: 1em; 843 | margin-right: 1em; 844 | } 845 | .ui.eight.doubling.cards { 846 | margin-left: -1em; 847 | margin-right: -1em; 848 | } 849 | .ui.eight.doubling.cards > .card { 850 | width: calc( 33.33333333% - 2em ); 851 | margin-left: 1em; 852 | margin-right: 1em; 853 | } 854 | .ui.nine.doubling.cards { 855 | margin-left: -1em; 856 | margin-right: -1em; 857 | } 858 | .ui.nine.doubling.cards > .card { 859 | width: calc( 33.33333333% - 2em ); 860 | margin-left: 1em; 861 | margin-right: 1em; 862 | } 863 | .ui.ten.doubling.cards { 864 | margin-left: -1em; 865 | margin-right: -1em; 866 | } 867 | .ui.ten.doubling.cards > .card { 868 | width: calc( 33.33333333% - 2em ); 869 | margin-left: 1em; 870 | margin-right: 1em; 871 | } 872 | } 873 | 874 | /* Tablet Only */ 875 | @media only screen and (min-width: 768px) and (max-width: 991px) { 876 | .ui.two.doubling.cards { 877 | margin-left: 0em; 878 | margin-right: 0em; 879 | } 880 | .ui.two.doubling.cards > .card { 881 | width: 100%; 882 | margin-left: 0em; 883 | margin-right: 0em; 884 | } 885 | .ui.three.doubling.cards { 886 | margin-left: -1em; 887 | margin-right: -1em; 888 | } 889 | .ui.three.doubling.cards > .card { 890 | width: calc( 50% - 2em ); 891 | margin-left: 1em; 892 | margin-right: 1em; 893 | } 894 | .ui.four.doubling.cards { 895 | margin-left: -1em; 896 | margin-right: -1em; 897 | } 898 | .ui.four.doubling.cards > .card { 899 | width: calc( 50% - 2em ); 900 | margin-left: 1em; 901 | margin-right: 1em; 902 | } 903 | .ui.five.doubling.cards { 904 | margin-left: -1em; 905 | margin-right: -1em; 906 | } 907 | .ui.five.doubling.cards > .card { 908 | width: calc( 33.33333333% - 2em ); 909 | margin-left: 1em; 910 | margin-right: 1em; 911 | } 912 | .ui.six.doubling.cards { 913 | margin-left: -1em; 914 | margin-right: -1em; 915 | } 916 | .ui.six.doubling.cards > .card { 917 | width: calc( 33.33333333% - 2em ); 918 | margin-left: 1em; 919 | margin-right: 1em; 920 | } 921 | .ui.eight.doubling.cards { 922 | margin-left: -1em; 923 | margin-right: -1em; 924 | } 925 | .ui.eight.doubling.cards > .card { 926 | width: calc( 33.33333333% - 2em ); 927 | margin-left: 1em; 928 | margin-right: 1em; 929 | } 930 | .ui.eight.doubling.cards { 931 | margin-left: -0.75em; 932 | margin-right: -0.75em; 933 | } 934 | .ui.eight.doubling.cards > .card { 935 | width: calc( 25% - 1.5em ); 936 | margin-left: 0.75em; 937 | margin-right: 0.75em; 938 | } 939 | .ui.nine.doubling.cards { 940 | margin-left: -0.75em; 941 | margin-right: -0.75em; 942 | } 943 | .ui.nine.doubling.cards > .card { 944 | width: calc( 25% - 1.5em ); 945 | margin-left: 0.75em; 946 | margin-right: 0.75em; 947 | } 948 | .ui.ten.doubling.cards { 949 | margin-left: -0.75em; 950 | margin-right: -0.75em; 951 | } 952 | .ui.ten.doubling.cards > .card { 953 | width: calc( 20% - 1.5em ); 954 | margin-left: 0.75em; 955 | margin-right: 0.75em; 956 | } 957 | } 958 | 959 | /*------------------- 960 | Stackable 961 | --------------------*/ 962 | 963 | @media only screen and (max-width: 767px) { 964 | .ui.stackable.cards { 965 | display: block !important; 966 | } 967 | .ui.stackable.cards .card:first-child { 968 | margin-top: 0em !important; 969 | } 970 | .ui.stackable.cards > .card { 971 | display: block !important; 972 | height: auto !important; 973 | margin: 1em 1em; 974 | padding: 0 !important; 975 | width: calc( 100% - 2em ) !important; 976 | } 977 | } 978 | 979 | /*-------------- 980 | Size 981 | ---------------*/ 982 | 983 | .ui.cards > .card { 984 | font-size: 1em; 985 | } 986 | 987 | 988 | /******************************* 989 | Theme Overrides 990 | *******************************/ 991 | 992 | 993 | 994 | /******************************* 995 | User Variable Overrides 996 | *******************************/ 997 | 998 | -------------------------------------------------------------------------------- /card.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI 2.4.1 - Item 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */.ui.card,.ui.cards>.card{max-width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:290px;min-height:0;background:#fff;padding:0;border:none;border-radius:.28571429rem;-webkit-box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;-webkit-transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:box-shadow .1s ease,transform .1s ease;transition:box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;z-index:''}.ui.card{margin:1em 0}.ui.card a,.ui.cards>.card a{cursor:pointer}.ui.card:first-child{margin-top:0}.ui.card:last-child{margin-bottom:0}.ui.cards{display:-webkit-box;display:-ms-flexbox;display:flex;margin:-.875em -.5em;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.cards>.card{display:-webkit-box;display:-ms-flexbox;display:flex;margin:.875em .5em;float:none}.ui.card:after,.ui.cards:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.cards~.ui.cards{margin-top:.875em}.ui.card>:first-child,.ui.cards>.card>:first-child{border-radius:.28571429rem .28571429rem 0 0!important;border-top:none!important}.ui.card>:last-child,.ui.cards>.card>:last-child{border-radius:0 0 .28571429rem .28571429rem!important}.ui.card>:only-child,.ui.cards>.card>:only-child{border-radius:.28571429rem!important}.ui.card>.image,.ui.cards>.card>.image{position:relative;display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:0;background:rgba(0,0,0,.05)}.ui.card>.image>img,.ui.cards>.card>.image>img{display:block;width:100%;height:auto;border-radius:inherit}.ui.card>.image:not(.ui)>img,.ui.cards>.card>.image:not(.ui)>img{border:none}.ui.card>.content,.ui.cards>.card>.content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border:none;border-top:1px solid rgba(34,36,38,.1);background:0 0;margin:0;padding:1em 1em;-webkit-box-shadow:none;box-shadow:none;font-size:1em;border-radius:0}.ui.card>.content:after,.ui.cards>.card>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.card>.content>.header,.ui.cards>.card>.content>.header{display:block;margin:'';font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;color:rgba(0,0,0,.85)}.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui){font-weight:700;font-size:1.28571429em;margin-top:-.21425em;line-height:1.28571429em}.ui.card>.content>.header+.description,.ui.card>.content>.meta+.description,.ui.cards>.card>.content>.header+.description,.ui.cards>.card>.content>.meta+.description{margin-top:.5em}.ui.card [class*="left floated"],.ui.cards>.card [class*="left floated"]{float:left}.ui.card [class*="right floated"],.ui.cards>.card [class*="right floated"]{float:right}.ui.card [class*="left aligned"],.ui.cards>.card [class*="left aligned"]{text-align:left}.ui.card [class*="center aligned"],.ui.cards>.card [class*="center aligned"]{text-align:center}.ui.card [class*="right aligned"],.ui.cards>.card [class*="right aligned"]{text-align:right}.ui.card .content img,.ui.cards>.card .content img{display:inline-block;vertical-align:middle;width:''}.ui.card .avatar img,.ui.card img.avatar,.ui.cards>.card .avatar img,.ui.cards>.card img.avatar{width:2em;height:2em;border-radius:500rem}.ui.card>.content>.description,.ui.cards>.card>.content>.description{clear:both;color:rgba(0,0,0,.68)}.ui.card>.content p,.ui.cards>.card>.content p{margin:0 0 .5em}.ui.card>.content p:last-child,.ui.cards>.card>.content p:last-child{margin-bottom:0}.ui.card .meta,.ui.cards>.card .meta{font-size:1em;color:rgba(0,0,0,.4)}.ui.card .meta *,.ui.cards>.card .meta *{margin-right:.3em}.ui.card .meta :last-child,.ui.cards>.card .meta :last-child{margin-right:0}.ui.card .meta [class*="right floated"],.ui.cards>.card .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.card>.content a:not(.ui),.ui.cards>.card>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content a:not(.ui):hover,.ui.cards>.card>.content a:not(.ui):hover{color:''}.ui.card>.content>a.header,.ui.cards>.card>.content>a.header{color:rgba(0,0,0,.85)}.ui.card>.content>a.header:hover,.ui.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.card .meta>a:not(.ui),.ui.cards>.card .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.card .meta>a:not(.ui):hover,.ui.cards>.card .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.card>.button,.ui.card>.buttons,.ui.cards>.card>.button,.ui.cards>.card>.buttons{margin:0 -1px;width:calc(100% + 2px)}.ui.card .dimmer,.ui.cards>.card .dimmer{background-color:'';z-index:10}.ui.card>.content .star.icon,.ui.cards>.card>.content .star.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .star.icon:hover,.ui.cards>.card>.content .star.icon:hover{opacity:1;color:#ffb70a}.ui.card>.content .active.star.icon,.ui.cards>.card>.content .active.star.icon{color:#ffe623}.ui.card>.content .like.icon,.ui.cards>.card>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .like.icon:hover,.ui.cards>.card>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.card>.content .active.like.icon,.ui.cards>.card>.content .active.like.icon{color:#ff2733}.ui.card>.extra,.ui.cards>.card>.extra{max-width:100%;min-height:0!important;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid rgba(0,0,0,.05)!important;position:static;background:0 0;width:auto;margin:0 0;padding:.75em 1em;top:0;left:0;color:rgba(0,0,0,.4);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.extra a:not(.ui),.ui.cards>.card>.extra a:not(.ui){color:rgba(0,0,0,.4)}.ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.raised.card,.ui.raised.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.link.cards .raised.card:hover,.ui.link.raised.card:hover,.ui.raised.cards a.card:hover,a.ui.raised.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25)}.ui.raised.card,.ui.raised.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.centered.cards{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.card{margin-left:auto;margin-right:auto}.ui.fluid.card{width:100%;max-width:9999px}.ui.cards a.card,.ui.link.card,.ui.link.cards .card,a.ui.card{-webkit-transform:none;transform:none}.ui.cards a.card:hover,.ui.link.card:hover,.ui.link.cards .card:hover,a.ui.card:hover{cursor:pointer;z-index:5;background:#fff;border:none;-webkit-box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.ui.cards>.red.card,.ui.red.card,.ui.red.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5}.ui.cards>.red.card:hover,.ui.red.card:hover,.ui.red.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd}.ui.cards>.orange.card,.ui.orange.card,.ui.orange.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5}.ui.cards>.orange.card:hover,.ui.orange.card:hover,.ui.orange.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd}.ui.cards>.yellow.card,.ui.yellow.card,.ui.yellow.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5}.ui.cards>.yellow.card:hover,.ui.yellow.card:hover,.ui.yellow.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd}.ui.cards>.olive.card,.ui.olive.card,.ui.olive.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5}.ui.cards>.olive.card:hover,.ui.olive.card:hover,.ui.olive.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd}.ui.cards>.green.card,.ui.green.card,.ui.green.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5}.ui.cards>.green.card:hover,.ui.green.card:hover,.ui.green.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd}.ui.cards>.teal.card,.ui.teal.card,.ui.teal.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5}.ui.cards>.teal.card:hover,.ui.teal.card:hover,.ui.teal.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd}.ui.blue.card,.ui.blue.cards>.card,.ui.cards>.blue.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5}.ui.blue.card:hover,.ui.blue.cards>.card:hover,.ui.cards>.blue.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd}.ui.cards>.violet.card,.ui.violet.card,.ui.violet.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5}.ui.cards>.violet.card:hover,.ui.violet.card:hover,.ui.violet.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd}.ui.cards>.purple.card,.ui.purple.card,.ui.purple.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5}.ui.cards>.purple.card:hover,.ui.purple.card:hover,.ui.purple.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd}.ui.cards>.pink.card,.ui.pink.card,.ui.pink.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5}.ui.cards>.pink.card:hover,.ui.pink.card:hover,.ui.pink.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd}.ui.brown.card,.ui.brown.cards>.card,.ui.cards>.brown.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5}.ui.brown.card:hover,.ui.brown.cards>.card:hover,.ui.cards>.brown.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd}.ui.cards>.grey.card,.ui.grey.card,.ui.grey.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5}.ui.cards>.grey.card:hover,.ui.grey.card:hover,.ui.grey.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd}.ui.black.card,.ui.black.cards>.card,.ui.cards>.black.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5}.ui.black.card:hover,.ui.black.cards>.card:hover,.ui.cards>.black.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd}.ui.one.cards{margin-left:0;margin-right:0}.ui.one.cards>.card{width:100%}.ui.two.cards{margin-left:-1em;margin-right:-1em}.ui.two.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.three.cards{margin-left:-1em;margin-right:-1em}.ui.three.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.four.cards{margin-left:-.75em;margin-right:-.75em}.ui.four.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.five.cards{margin-left:-.75em;margin-right:-.75em}.ui.five.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.six.cards{margin-left:-.75em;margin-right:-.75em}.ui.six.cards>.card{width:calc(16.66666667% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.seven.cards{margin-left:-.5em;margin-right:-.5em}.ui.seven.cards>.card{width:calc(14.28571429% - 1em);margin-left:.5em;margin-right:.5em}.ui.eight.cards{margin-left:-.5em;margin-right:-.5em}.ui.eight.cards>.card{width:calc(12.5% - 1em);margin-left:.5em;margin-right:.5em;font-size:11px}.ui.nine.cards{margin-left:-.5em;margin-right:-.5em}.ui.nine.cards>.card{width:calc(11.11111111% - 1em);margin-left:.5em;margin-right:.5em;font-size:10px}.ui.ten.cards{margin-left:-.5em;margin-right:-.5em}.ui.ten.cards>.card{width:calc(10% - 1em);margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.seven.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.seven.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.nine.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.nine.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.ten.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.ten.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}}@media only screen and (min-width:768px) and (max-width:991px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.eight.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.nine.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.nine.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.ten.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.ten.doubling.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}}@media only screen and (max-width:767px){.ui.stackable.cards{display:block!important}.ui.stackable.cards .card:first-child{margin-top:0!important}.ui.stackable.cards>.card{display:block!important;height:auto!important;margin:1em 1em;padding:0!important;width:calc(100% - 2em)!important}}.ui.cards>.card{font-size:1em} -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic/card", 3 | "description": "Single component release of card", 4 | "homepage": "http://www.semantic-ui.com", 5 | "authors": [{ 6 | "name": "Jack Lukic", 7 | "email": "jacklukic@gmail.com", 8 | "web": "http://www.jacklukic.com", 9 | "role": "Creator" 10 | }], 11 | "keywords": ["semantic", "ui", "css", "framework"], 12 | "license": "MIT", 13 | "version": "2.4.1" 14 | } -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | 2 | Package.describe({ 3 | name : 'semantic:ui-card', 4 | summary : 'Semantic UI - Card: Single component release', 5 | version : '2.2.10', 6 | git : 'git://github.com/Semantic-Org/UI-Card.git', 7 | }); 8 | 9 | Package.onUse(function(api) { 10 | api.versionsFrom('1.0'); 11 | api.addFiles([ 12 | 'card.css' 13 | ], 'client'); 14 | }); 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic-ui-card", 3 | "version": "2.4.1", 4 | "title": "Semantic UI - Card", 5 | "description": "Single component release of card", 6 | "homepage": "http://www.semantic-ui.com", 7 | "author": "Jack Lukic ", 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/Semantic-Org/UI-Card.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/Semantic-Org/Semantic-UI/issues" 15 | }, 16 | "devDependencies": {} 17 | } --------------------------------------------------------------------------------