0
# Content Components
1

2
UIkit's content components provide styling for displaying information including cards, tables, lists, media elements, and content formatting.
3

4
## Capabilities
5

6
### Card
7

8
Card component for containing and organizing content with consistent styling.
9

10
```css { .api }
11
/* Card Base */
12
.uk-card {
13
  /* Card container */
14
  position: relative;
15
  box-sizing: border-box;
16
  transition: box-shadow 0.1s ease-in-out;
17
}
18

19
/* Card Variants */
20
.uk-card-default {
21
  /* Default card with border */
22
  background: #fff;
23
  color: #666;
24
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
25
}
26

27
.uk-card-primary {
28
  /* Primary themed card */
29
  background: #1e87f0;
30
  color: #fff;
31
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
32
}
33

34
.uk-card-secondary {
35
  /* Secondary themed card */
36
  background: #222;
37
  color: #fff;
38
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
39
}
40

41
/* Card Structure */
42
.uk-card-header {
43
  /* Card header section */
44
  padding: 15px 20px;
45
  border-bottom: 1px solid #e5e5e5;
46
}
47

48
.uk-card-body {
49
  /* Card main content */
50
  padding: 20px;
51
}
52

53
.uk-card-footer {
54
  /* Card footer section */
55
  padding: 15px 20px;
56
  border-top: 1px solid #e5e5e5;
57
}
58

59
/* Card Media */
60
.uk-card-media-top,
61
.uk-card-media-bottom,
62
.uk-card-media-left,
63
.uk-card-media-right {
64
  /* Card media positioning */
65
  overflow: hidden;
66
}
67

68
/* Card Sizes */
69
.uk-card-small .uk-card-body {
70
  /* Small card variant */
71
  padding: 15px;
72
}
73

74
.uk-card-large .uk-card-body {
75
  /* Large card variant */
76
  padding: 30px;
77
}
78

79
/* Card Title */
80
.uk-card-title {
81
  /* Card title styling */
82
  font-size: 18px;
83
  line-height: 1.4;
84
  color: #333;
85
}
86

87
/* Card Badge */
88
.uk-card-badge {
89
  /* Card badge positioning */
90
  position: absolute;
91
  top: 15px;
92
  right: 15px;
93
  z-index: 1;
94
}
95

96
/* Card Hover */
97
.uk-card-hover:hover {
98
  /* Card hover effect */
99
  box-shadow: 0 14px 25px rgba(0,0,0,0.16);
100
  transform: translateY(-2px);
101
}
102
```
103

104
**Usage Examples:**
105

106
```html
107
<!-- Basic Card -->
108
<div class="uk-card uk-card-default uk-card-body">
109
    <h3 class="uk-card-title">Default</h3>
110
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
111
</div>
112

113
<!-- Card with Header and Footer -->
114
<div class="uk-card uk-card-default">
115
    <div class="uk-card-header">
116
        <div class="uk-grid-small uk-flex-middle" uk-grid>
117
            <div class="uk-width-auto">
118
                <img class="uk-border-circle" width="40" height="40" src="images/avatar.jpg">
119
            </div>
120
            <div class="uk-width-expand">
121
                <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
122
                <p class="uk-text-meta uk-margin-remove-top">April 01, 2016</p>
123
            </div>
124
        </div>
125
    </div>
126
    <div class="uk-card-body">
127
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
128
    </div>
129
    <div class="uk-card-footer">
130
        <a href="#" class="uk-button uk-button-text">Read more</a>
131
    </div>
132
</div>
133

134
<!-- Card with Media -->
135
<div class="uk-card uk-card-default">
136
    <div class="uk-card-media-top">
137
        <img src="images/photo.jpg" alt="">
138
    </div>
139
    <div class="uk-card-body">
140
        <h3 class="uk-card-title">Media Top</h3>
141
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
142
    </div>
143
</div>
144
```
145

146
### Table
147

148
Table component with various styling options.
149

150
```css { .api }
151
/* Table Base */
152
.uk-table {
153
  /* Base table styling */
154
  border-collapse: collapse;
155
  border-spacing: 0;
156
  width: 100%;
157
  margin-bottom: 20px;
158
}
159

160
.uk-table th,
161
.uk-table td {
162
  /* Table cell styling */
163
  padding: 16px 12px;
164
  text-align: left;
165
  vertical-align: top;
166
  border-bottom: 1px solid #e5e5e5;
167
}
168

169
.uk-table th {
170
  /* Table header styling */
171
  font-size: 12px;
172
  font-weight: normal;
173
  color: #999;
174
  text-transform: uppercase;
175
}
176

177
/* Table Variants */
178
.uk-table-striped > tr:nth-of-type(odd),
179
.uk-table-striped tbody tr:nth-of-type(odd) {
180
  /* Striped table rows */
181
  background: #f8f8f8;
182
}
183

184
.uk-table-hover > tr:hover,
185
.uk-table-hover tbody tr:hover {
186
  /* Hoverable table rows */
187
  background: #ffd;
188
}
189

190
.uk-table-middle,
191
.uk-table-middle td {
192
  /* Middle-aligned table cells */
193
  vertical-align: middle !important;
194
}
195

196
/* Table Sizes */
197
.uk-table-small th,
198
.uk-table-small td {
199
  /* Small table variant */
200
  padding: 10px 12px;
201
}
202

203
.uk-table-large th,
204
.uk-table-large td {
205
  /* Large table variant */
206
  padding: 22px 12px;
207
}
208

209
/* Table Divider */
210
.uk-table-divider > tr:not(:first-child),
211
.uk-table-divider > :not(:first-child) > tr,
212
.uk-table-divider > :first-child > tr:not(:first-child) {
213
  /* Table with dividers */
214
  border-top: 1px solid #e5e5e5;
215
}
216

217
/* Responsive Table */
218
.uk-table-responsive {
219
  /* Responsive table wrapper */
220
  overflow-x: auto;
221
}
222
```
223

224
**Usage Examples:**
225

226
```html
227
<!-- Basic Table -->
228
<table class="uk-table uk-table-striped">
229
    <thead>
230
        <tr>
231
            <th>Table Heading</th>
232
            <th>Table Heading</th>
233
            <th>Table Heading</th>
234
        </tr>
235
    </thead>
236
    <tbody>
237
        <tr>
238
            <td>Table Data</td>
239
            <td>Table Data</td>
240
            <td>Table Data</td>
241
        </tr>
242
        <tr>
243
            <td>Table Data</td>
244
            <td>Table Data</td>
245
            <td>Table Data</td>
246
        </tr>
247
    </tbody>
248
</table>
249

250
<!-- Responsive Table -->
251
<div class="uk-overflow-auto">
252
    <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
253
        <thead>
254
            <tr>
255
                <th class="uk-table-shrink"></th>
256
                <th class="uk-table-small">Name</th>
257
                <th class="uk-table-small">Email</th>
258
                <th>Position</th>
259
            </tr>
260
        </thead>
261
        <tbody>
262
            <tr>
263
                <td><input class="uk-checkbox" type="checkbox"></td>
264
                <td class="uk-table-link">
265
                    <a class="uk-link-reset" href="">John Doe</a>
266
                </td>
267
                <td class="uk-text-truncate">john.doe@example.com</td>
268
                <td class="uk-text-nowrap">Web Developer</td>
269
            </tr>
270
        </tbody>
271
    </table>
272
</div>
273
```
274

275
### List
276

277
List styling component for ordered and unordered lists.
278

279
```css { .api }
280
/* List Base */
281
.uk-list {
282
  /* Base list styling */
283
  padding: 0;
284
  list-style: none;
285
}
286

287
.uk-list > li {
288
  /* List item styling */
289
  margin-bottom: 5px;
290
}
291

292
/* List Variants */
293
.uk-list-disc > li {
294
  /* Disc bullet list */
295
  list-style: disc inside;
296
}
297

298
.uk-list-decimal > li {
299
  /* Numbered list */
300
  list-style: decimal inside;
301
}
302

303
.uk-list-hyphen > li::before {
304
  /* Hyphen bullet list */
305
  content: "– ";
306
  display: inline-block;
307
}
308

309
.uk-list-muted > li::before {
310
  /* Muted hyphen bullets */
311
  color: #999 !important;
312
}
313

314
.uk-list-bullet > li::before {
315
  /* Custom bullet list */
316
  content: "";
317
  display: inline-block;
318
  position: relative;
319
  top: -2px;
320
  width: 1.5em;
321
  height: 1.5em;
322
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg...");
323
  background-repeat: no-repeat;
324
  background-position: 50% 50%;
325
}
326

327
/* List Dividers */
328
.uk-list-divider > li:nth-child(n+2) {
329
  /* List with dividers */
330
  margin-top: 5px;
331
  padding-top: 5px;
332
  border-top: 1px solid #e5e5e5;
333
}
334

335
/* List Striped */
336
.uk-list-striped > li:nth-of-type(odd) {
337
  /* Striped list background */
338
  padding: 5px 10px;
339
  background: #f8f8f8;
340
}
341

342
/* List Large */
343
.uk-list-large > li {
344
  /* Large list spacing */
345
  margin-bottom: 10px;
346
}
347
```
348

349
**Usage Examples:**
350

351
```html
352
<!-- Basic List -->
353
<ul class="uk-list">
354
    <li>List item 1</li>
355
    <li>List item 2</li>
356
    <li>List item 3</li>
357
</ul>
358

359
<!-- Bullet List -->
360
<ul class="uk-list uk-list-bullet">
361
    <li>List item 1</li>
362
    <li>List item 2</li>
363
    <li>List item 3</li>
364
</ul>
365

366
<!-- List with Dividers -->
367
<ul class="uk-list uk-list-divider">
368
    <li>List item 1</li>
369
    <li>List item 2</li>
370
    <li>List item 3</li>
371
</ul>
372

373
<!-- Navigation List -->
374
<ul class="uk-list uk-list-striped">
375
    <li><a href="#">Home</a></li>
376
    <li><a href="#">About</a></li>
377
    <li><a href="#">Services</a></li>
378
    <li><a href="#">Contact</a></li>
379
</ul>
380
```
381

382
### Description List
383

384
Description list styling for term-definition pairs.
385

386
```css { .api }
387
/* Description List */
388
.uk-description-list {
389
  /* Description list container */
390
  overflow: hidden;
391
}
392

393
.uk-description-list > dt {
394
  /* Description term */
395
  color: #333;
396
  font-size: 14px;
397
  font-weight: normal;
398
  text-transform: uppercase;
399
}
400

401
.uk-description-list > dd {
402
  /* Description definition */
403
  margin-left: 0;
404
  color: #666;
405
}
406

407
/* Description List Horizontal */
408
.uk-description-list-horizontal {
409
  /* Horizontal description list */
410
  overflow: hidden;
411
}
412

413
.uk-description-list-horizontal > dt {
414
  /* Horizontal term */
415
  width: 160px;
416
  float: left;
417
  clear: both;
418
  overflow: hidden;
419
  text-overflow: ellipsis;
420
  white-space: nowrap;
421
}
422

423
.uk-description-list-horizontal > dd {
424
  /* Horizontal definition */
425
  margin-left: 180px;
426
}
427

428
/* Description List Divider */
429
.uk-description-list-divider > dt:nth-child(n+2) {
430
  /* Divider above terms */
431
  margin-top: 20px;
432
  padding-top: 20px;
433
  border-top: 1px solid #e5e5e5;
434
}
435
```
436

437
**Usage Examples:**
438

439
```html
440
<!-- Basic Description List -->
441
<dl class="uk-description-list">
442
    <dt>Description term</dt>
443
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
444
    <dt>Description term</dt>
445
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
446
</dl>
447

448
<!-- Horizontal Description List -->
449
<dl class="uk-description-list uk-description-list-horizontal">
450
    <dt>Description term</dt>
451
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
452
    <dt>Description term</dt>
453
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</dd>
454
</dl>
455
```
456

457
### Article
458

459
Article content formatting for long-form text content.
460

461
```css { .api }
462
/* Article Container */
463
.uk-article {
464
  /* Article wrapper */
465
  display: flow-root;
466
}
467

468
/* Article Title */
469
.uk-article-title {
470
  /* Article main title */
471
  font-size: 36px;
472
  line-height: 1.2;
473
  color: #333;
474
  margin-bottom: 25px;
475
}
476

477
/* Article Lead */
478
.uk-article-lead {
479
  /* Article lead paragraph */
480
  color: #666;
481
  font-size: 18px;
482
  line-height: 1.5;
483
  margin-bottom: 25px;
484
}
485

486
/* Article Meta */
487
.uk-article-meta {
488
  /* Article metadata */
489
  font-size: 12px;
490
  line-height: 1.4;
491
  color: #999;
492
  margin-bottom: 20px;
493
}
494

495
.uk-article-meta a {
496
  /* Article meta links */
497
  color: #999;
498
  text-decoration: none;
499
}
500

501
.uk-article-meta a:hover {
502
  /* Article meta link hover */
503
  color: #666;
504
  text-decoration: underline;
505
}
506
```
507

508
**Usage Examples:**
509

510
```html
511
<!-- Article -->
512
<article class="uk-article">
513
    <h1 class="uk-article-title">
514
        <a class="uk-link-reset" href="">Heading</a>
515
    </h1>
516

517
    <p class="uk-article-meta">
518
        Written by <a href="#">Super User</a> on 12 April 2012. 
519
        Posted in <a href="#">Blog</a>
520
    </p>
521

522
    <p class="uk-article-lead">
523
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
524
    </p>
525

526
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
527

528
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
529
</article>
530
```
531

532
### Comment
533

534
Comment thread styling for user-generated content.
535

536
```css { .api }
537
/* Comment Container */
538
.uk-comment {
539
  /* Comment wrapper */
540
  display: flow-root;
541
}
542

543
/* Comment Body */
544
.uk-comment-body {
545
  /* Comment content container */
546
  overflow-wrap: break-word;
547
  word-wrap: break-word;
548
}
549

550
/* Comment Header */
551
.uk-comment-header {
552
  /* Comment header section */
553
  margin-bottom: 20px;
554
}
555

556
/* Comment Title */
557
.uk-comment-title {
558
  /* Comment author/title */
559
  font-size: 16px;
560
  line-height: 1.4;
561
  color: #333;
562
  margin: 0;
563
}
564

565
/* Comment Meta */
566
.uk-comment-meta {
567
  /* Comment metadata */
568
  font-size: 12px;
569
  line-height: 1.4;
570
  color: #999;
571
  margin: 5px 0 0 0;
572
}
573

574
/* Comment Avatar */
575
.uk-comment-avatar {
576
  /* Comment avatar positioning */
577
  margin-right: 15px;
578
  float: left;
579
}
580

581
/* Comment List */
582
.uk-comment-list {
583
  /* Comment thread list */
584
  padding: 0;
585
  list-style: none;
586
}
587

588
.uk-comment-list .uk-comment ~ ul {
589
  /* Nested comment indentation */
590
  margin: 25px 0 0 0;
591
  padding-left: 30px;
592
  list-style: none;
593
}
594

595
/* Comment Primary */
596
.uk-comment-primary {
597
  /* Primary/highlighted comment */
598
  padding: 30px;
599
  background-color: #f8f8f8;
600
}
601
```
602

603
**Usage Examples:**
604

605
```html
606
<!-- Comment Thread -->
607
<ul class="uk-comment-list">
608
    <li>
609
        <article class="uk-comment uk-comment-primary">
610
            <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
611
                <div class="uk-width-auto">
612
                    <img class="uk-comment-avatar" src="images/avatar.jpg" width="80" height="80" alt="">
613
                </div>
614
                <div class="uk-width-expand">
615
                    <h4 class="uk-comment-title uk-margin-remove">
616
                        <a class="uk-link-reset" href="">Author</a>
617
                    </h4>
618
                    <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
619
                        <li><a href="#">12 days ago</a></li>
620
                        <li><a href="#">Reply</a></li>
621
                    </ul>
622
                </div>
623
            </header>
624
            <div class="uk-comment-body">
625
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
626
            </div>
627
        </article>
628
        
629
        <ul>
630
            <li>
631
                <article class="uk-comment">
632
                    <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
633
                        <div class="uk-width-auto">
634
                            <img class="uk-comment-avatar" src="images/avatar.jpg" width="80" height="80" alt="">
635
                        </div>
636
                        <div class="uk-width-expand">
637
                            <h4 class="uk-comment-title uk-margin-remove">
638
                                <a class="uk-link-reset" href="">Author</a>
639
                            </h4>
640
                            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
641
                                <li><a href="#">12 days ago</a></li>
642
                                <li><a href="#">Reply</a></li>
643
                            </ul>
644
                        </div>
645
                    </header>
646
                    <div class="uk-comment-body">
647
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
648
                    </div>
649
                </article>
650
            </li>
651
        </ul>
652
    </li>
653
</ul>
654
```
655

656
### Progress
657

658
Progress indicator component for showing completion status.
659

660
```css { .api }
661
/* Progress Bar */
662
.uk-progress {
663
  /* Progress container */
664
  vertical-align: baseline;
665
  -webkit-appearance: none;
666
  -moz-appearance: none;
667
  display: block;
668
  width: 100%;
669
  border: 0;
670
  background-color: #f8f8f8;
671
  border-radius: 500px;
672
  overflow: hidden;
673
}
674

675
.uk-progress::-webkit-progress-bar {
676
  /* Webkit progress bar background */
677
  background-color: #f8f8f8;
678
  border-radius: 500px;
679
  overflow: hidden;
680
}
681

682
.uk-progress::-webkit-progress-value {
683
  /* Webkit progress bar value */
684
  background-color: #1e87f0;
685
  border-radius: 500px;
686
  transition: width 0.6s ease;
687
}
688

689
.uk-progress::-moz-progress-bar {
690
  /* Firefox progress bar */
691
  background-color: #1e87f0;
692
  border-radius: 500px;
693
}
694
```
695

696
**Usage Examples:**
697

698
```html
699
<!-- Basic Progress -->
700
<progress class="uk-progress" value="32" max="100"></progress>
701

702
<!-- Progress with Label -->
703
<div class="uk-margin">
704
    <div class="uk-flex uk-flex-between uk-text-small">
705
        <div>Progress</div>
706
        <div>32%</div>
707
    </div>
708
    <progress class="uk-progress" value="32" max="100"></progress>
709
</div>
710
```
711

712
### Badge
713

714
Small status indicators and labels.
715

716
```css { .api }
717
/* Badge */
718
.uk-badge {
719
  /* Badge styling */
720
  display: inline-block;
721
  padding: 2px 6px;
722
  background: #1e87f0;
723
  line-height: 1.2;
724
  color: #fff;
725
  font-size: 11px;
726
  text-transform: uppercase;
727
  border-radius: 2px;
728
}
729

730
.uk-badge:empty {
731
  /* Empty badge (dot) */
732
  height: 10px;
733
  width: 10px;
734
  border-radius: 50%;
735
  padding: 0;
736
}
737
```
738

739
**Usage Examples:**
740

741
```html
742
<!-- Text Badges -->
743
<span class="uk-badge">Badge</span>
744
<span class="uk-badge" style="background-color: #32d296;">Success</span>
745
<span class="uk-badge" style="background-color: #faa05a;">Warning</span>
746
<span class="uk-badge" style="background-color: #f0506e;">Danger</span>
747

748
<!-- Notification Badge -->
749
<button class="uk-button uk-button-default">
750
    Button <span class="uk-badge">1</span>
751
</button>
752

753
<!-- Dot Badge -->
754
<span class="uk-badge"></span>
755
```
756

757
### Label
758

759
Content labeling component.
760

761
```css { .api }
762
/* Label */
763
.uk-label {
764
  /* Label styling */
765
  display: inline-block;
766
  padding: 2px 6px;
767
  background: #1e87f0;
768
  line-height: 1.2;
769
  font-size: 11px;
770
  color: #fff;
771
  border-radius: 2px;
772
  text-transform: uppercase;
773
}
774

775
/* Label Variants */
776
.uk-label-success {
777
  /* Success label */
778
  background-color: #32d296;
779
}
780

781
.uk-label-warning {
782
  /* Warning label */
783
  background-color: #faa05a;
784
}
785

786
.uk-label-danger {
787
  /* Danger label */
788
  background-color: #f0506e;
789
}
790
```
791

792
**Usage Examples:**
793

794
```html
795
<!-- Basic Labels -->
796
<span class="uk-label">Default</span>
797
<span class="uk-label uk-label-success">Success</span>
798
<span class="uk-label uk-label-warning">Warning</span>
799
<span class="uk-label uk-label-danger">Danger</span>
800

801
<!-- Labels in Content -->
802
<h3>
803
    Heading
804
    <span class="uk-label">New</span>
805
</h3>
806
```