0
# UI Views
1

2
Content presentation components including cards, comments, feeds, and statistics for displaying rich content and data visualization.
3

4
## Capabilities
5

6
### Card
7

8
Content cards for displaying structured information in visually appealing containers.
9

10
```css { .api }
11
.ui.card                      /* Single card */
12
.ui.cards                     /* Card group container */
13

14
/* Card content areas */
15
.ui.card .content             /* Card content section */
16
.ui.card .image               /* Card image area */
17
.ui.card .header              /* Card header text */
18
.ui.card .meta                /* Card metadata */
19
.ui.card .description         /* Card description text */
20
.ui.card .extra.content       /* Additional card content */
21

22
/* Card variations */
23
.ui.fluid.card                /* Full-width card */
24
.ui.centered.card             /* Centered single card */
25
.ui.raised.card               /* Card with shadow */
26
.ui.link.card                 /* Clickable card */
27

28
/* Card groups */
29
.ui.one.cards                 /* Single column cards */
30
.ui.two.cards                 /* Two column cards */
31
.ui.three.cards               /* Three column cards */
32
.ui.four.cards                /* Four column cards */
33
.ui.five.cards                /* Five column cards */
34
.ui.six.cards                 /* Six column cards */
35
.ui.seven.cards               /* Seven column cards */
36
.ui.eight.cards               /* Eight column cards */
37

38
/* Card states */
39
.ui.card .disabled            /* Disabled card content */
40
.ui.cards .disabled.card      /* Disabled card in group */
41

42
/* Responsive cards */
43
.ui.stackable.cards           /* Cards stack on mobile */
44
.ui.doubling.cards            /* Cards double up on larger screens */
45
```
46

47
**Usage Examples:**
48

49
```html
50
<!-- Single card -->
51
<div class="ui card">
52
  <div class="image">
53
    <img src="avatar.jpg">
54
  </div>
55
  <div class="content">
56
    <div class="header">John Doe</div>
57
    <div class="meta">Developer</div>
58
    <div class="description">
59
      John is a software developer working on web applications.
60
    </div>
61
  </div>
62
  <div class="extra content">
63
    <a><i class="user icon"></i>22 Friends</a>
64
  </div>
65
</div>
66

67
<!-- Card group -->
68
<div class="ui three cards">
69
  <div class="card">
70
    <div class="content">
71
      <div class="header">Project Alpha</div>
72
      <div class="description">Web application project</div>
73
    </div>
74
  </div>
75
  <div class="card">
76
    <div class="content">
77
      <div class="header">Project Beta</div>
78
      <div class="description">Mobile application project</div>
79
    </div>
80
  </div>
81
  <div class="card">
82
    <div class="content">
83
      <div class="header">Project Gamma</div>
84
      <div class="description">Desktop application project</div>
85
    </div>
86
  </div>
87
</div>
88

89
<!-- Link cards -->
90
<div class="ui link cards">
91
  <div class="card">
92
    <div class="content">
93
      <div class="header">Article Title</div>
94
      <div class="description">Article summary goes here...</div>
95
    </div>
96
  </div>
97
</div>
98
```
99

100
### Comment
101

102
Comment threads and discussion systems for user-generated content.
103

104
```css { .api }
105
.ui.comments                  /* Comments container */
106

107
/* Comment structure */
108
.ui.comments .comment         /* Individual comment */
109
.ui.comments .avatar          /* Comment author avatar */
110
.ui.comments .content         /* Comment content area */
111
.ui.comments .author          /* Comment author name */
112
.ui.comments .metadata        /* Comment metadata */
113
.ui.comments .text            /* Comment text content */
114
.ui.comments .actions         /* Comment action links */
115

116
/* Comment variations */
117
.ui.minimal.comments          /* Minimal comment styling */
118
.ui.small.comments            /* Small sized comments */
119
.ui.large.comments            /* Large sized comments */
120

121
/* Comment states */
122
.ui.comments .collapsed.comment   /* Collapsed comment */
123
.ui.comments .comment .reply      /* Reply to comment */
124

125
/* Nested comments */
126
.ui.comments .comments        /* Nested comment thread */
127
```
128

129
**Usage Examples:**
130

131
```html
132
<!-- Comment thread -->
133
<div class="ui comments">
134
  <h3 class="ui dividing header">Comments</h3>
135
  
136
  <div class="comment">
137
    <a class="avatar">
138
      <img src="avatar1.jpg">
139
    </a>
140
    <div class="content">
141
      <a class="author">Tom Lukic</a>
142
      <div class="metadata">
143
        <span class="date">Today at 5:42PM</span>
144
      </div>
145
      <div class="text">
146
        This is a great article! I really enjoyed reading it.
147
      </div>
148
      <div class="actions">
149
        <a class="reply">Reply</a>
150
      </div>
151
    </div>
152
  </div>
153
  
154
  <div class="comment">
155
    <a class="avatar">
156
      <img src="avatar2.jpg">
157
    </a>
158
    <div class="content">
159
      <a class="author">Sarah Connor</a>
160
      <div class="metadata">
161
        <span class="date">Yesterday at 12:30AM</span>
162
      </div>
163
      <div class="text">
164
        I agree with Tom, very well written.
165
      </div>
166
      <div class="actions">
167
        <a class="reply">Reply</a>
168
      </div>
169
      <!-- Nested reply -->
170
      <div class="comments">
171
        <div class="comment">
172
          <a class="avatar">
173
            <img src="avatar3.jpg">
174
          </a>
175
          <div class="content">
176
            <a class="author">John Smith</a>
177
            <div class="metadata">
178
              <span class="date">Just now</span>
179
            </div>
180
            <div class="text">
181
              Thanks for the feedback!
182
            </div>
183
            <div class="actions">
184
              <a class="reply">Reply</a>
185
            </div>
186
          </div>
187
        </div>
188
      </div>
189
    </div>
190
  </div>
191
</div>
192
```
193

194
### Feed
195

196
Activity feeds for displaying chronological lists of events and updates.
197

198
```css { .api }
199
.ui.feed                      /* Feed container */
200

201
/* Feed structure */
202
.ui.feed .event               /* Individual feed event */
203
.ui.feed .label               /* Event label/avatar */
204
.ui.feed .content             /* Event content */
205
.ui.feed .summary             /* Event summary */
206
.ui.feed .date                /* Event date */
207
.ui.feed .meta                /* Event metadata */
208
.ui.feed .extra               /* Extra event content */
209

210
/* Feed variations */
211
.ui.small.feed                /* Small sized feed */
212
.ui.large.feed                /* Large sized feed */
213

214
/* Feed elements */
215
.ui.feed .event .image        /* Event image */
216
.ui.feed .event .icon         /* Event icon */
217
.ui.feed .event .user         /* Event user reference */
218
```
219

220
**Usage Examples:**
221

222
```html
223
<!-- Activity feed -->
224
<div class="ui feed">
225
  <div class="event">
226
    <div class="label">
227
      <img src="user1.jpg">
228
    </div>
229
    <div class="content">
230
      <div class="summary">
231
        <a class="user">Elliot Fu</a> added <a>Rachel Royce</a> as a friend
232
        <div class="date">1 Hour Ago</div>
233
      </div>
234
      <div class="meta">
235
        <a class="like">
236
          <i class="like icon"></i> 4 Likes
237
        </a>
238
      </div>
239
    </div>
240
  </div>
241
  
242
  <div class="event">
243
    <div class="label">
244
      <i class="pencil icon"></i>
245
    </div>
246
    <div class="content">
247
      <div class="summary">
248
        You submitted a new post to the page
249
        <div class="date">3 days ago</div>
250
      </div>
251
      <div class="extra text">
252
        I'm having a great time in Nepal. I hope everyone is having a good time back home.
253
      </div>
254
      <div class="meta">
255
        <a class="like">
256
          <i class="like icon"></i> 11 Likes
257
        </a>
258
      </div>
259
    </div>
260
  </div>
261
  
262
  <div class="event">
263
    <div class="label">
264
      <img src="user2.jpg">
265
    </div>
266
    <div class="content">
267
      <div class="summary">
268
        <a>Helen Troy</a> added 2 photos
269
        <div class="date">4 days ago</div>
270
      </div>
271
      <div class="extra images">
272
        <a><img src="photo1.jpg"></a>
273
        <a><img src="photo2.jpg"></a>
274
      </div>
275
    </div>
276
  </div>
277
</div>
278
```
279

280
### Item
281

282
Content items for displaying lists of structured content with images and metadata.
283

284
```css { .api }
285
.ui.items                     /* Items container */
286

287
/* Item structure */
288
.ui.items .item               /* Individual item */
289
.ui.items .image              /* Item image */
290
.ui.items .content            /* Item content area */
291
.ui.items .header             /* Item header/title */
292
.ui.items .meta               /* Item metadata */
293
.ui.items .description        /* Item description */
294
.ui.items .extra              /* Extra item content */
295

296
/* Item variations */
297
.ui.relaxed.items             /* Items with extra spacing */
298
.ui.divided.items             /* Items with dividers */
299
.ui.link.items                /* Clickable items */
300

301
/* Item states */
302
.ui.items .disabled.item      /* Disabled item */
303
.ui.items .active.item        /* Active item */
304
```
305

306
**Usage Examples:**
307

308
```html
309
<!-- Items list -->
310
<div class="ui items">
311
  <div class="item">
312
    <div class="image">
313
      <img src="product1.jpg">
314
    </div>
315
    <div class="content">
316
      <a class="header">Laptop Computer</a>
317
      <div class="meta">
318
        <span class="price">$1200</span>
319
        <span class="stay">1TB SSD</span>
320
      </div>
321
      <div class="description">
322
        <p>High-performance laptop perfect for development work.</p>
323
      </div>
324
      <div class="extra">
325
        <div class="ui label">Technology</div>
326
        <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
327
      </div>
328
    </div>
329
  </div>
330
  
331
  <div class="item">
332
    <div class="image">
333
      <img src="product2.jpg">
334
    </div>
335
    <div class="content">
336
      <a class="header">Wireless Mouse</a>
337
      <div class="meta">
338
        <span class="price">$29</span>
339
        <span class="stay">Bluetooth</span>
340
      </div>
341
      <div class="description">
342
        <p>Ergonomic wireless mouse with long battery life.</p>
343
      </div>
344
      <div class="extra">
345
        <div class="ui right floated primary button">
346
          Buy now
347
          <i class="right chevron icon"></i>
348
        </div>
349
        <div class="ui label">Accessories</div>
350
      </div>
351
    </div>
352
  </div>
353
</div>
354
```
355

356
### Statistic
357

358
Statistical displays for presenting numerical data and metrics.
359

360
```css { .api }
361
.ui.statistic                 /* Single statistic */
362
.ui.statistics                /* Statistics group */
363

364
/* Statistic content */
365
.ui.statistic .value          /* Statistic value */
366
.ui.statistic .label          /* Statistic label */
367

368
/* Statistic variations */
369
.ui.horizontal.statistic      /* Horizontal layout statistic */
370
.ui.inverted.statistics       /* Inverted color statistics */
371

372
/* Statistic sizes */
373
.ui.mini.statistic            /* Mini statistic */
374
.ui.tiny.statistic            /* Tiny statistic */
375
.ui.small.statistic           /* Small statistic */
376
.ui.large.statistic           /* Large statistic */
377
.ui.huge.statistic            /* Huge statistic */
378

379
/* Statistic groups */
380
.ui.one.statistics            /* Single statistic group */
381
.ui.two.statistics            /* Two statistics group */
382
.ui.three.statistics          /* Three statistics group */
383
.ui.four.statistics           /* Four statistics group */
384
.ui.five.statistics           /* Five statistics group */
385
.ui.six.statistics            /* Six statistics group */
386
.ui.seven.statistics          /* Seven statistics group */
387
.ui.eight.statistics          /* Eight statistics group */
388
.ui.nine.statistics           /* Nine statistics group */
389
.ui.ten.statistics            /* Ten statistics group */
390

391
/* Statistic content types */
392
.ui.statistic .text.value     /* Text value statistic */
393
```
394

395
**Usage Examples:**
396

397
```html
398
<!-- Single statistic -->
399
<div class="ui statistic">
400
  <div class="value">22</div>
401
  <div class="label">Saves</div>
402
</div>
403

404
<!-- Statistics group -->
405
<div class="ui statistics">
406
  <div class="statistic">
407
    <div class="value">22</div>
408
    <div class="label">Faves</div>
409
  </div>
410
  <div class="statistic">
411
    <div class="value">31,200</div>
412
    <div class="label">Views</div>
413
  </div>
414
  <div class="statistic">
415
    <div class="value">22</div>
416
    <div class="label">Members</div>
417
  </div>
418
</div>
419

420
<!-- Horizontal statistics -->
421
<div class="ui horizontal statistics">
422
  <div class="statistic">
423
    <div class="value">2,204</div>
424
    <div class="label">Views</div>
425
  </div>
426
  <div class="statistic">
427
    <div class="value">3,322</div>
428
    <div class="label">Downloads</div>
429
  </div>
430
</div>
431

432
<!-- Colored and sized statistics -->
433
<div class="ui huge red statistic">
434
  <div class="value">54</div>
435
  <div class="label">Signups</div>
436
</div>
437

438
<!-- Text value statistic -->
439
<div class="ui statistic">
440
  <div class="text value">
441
    Three<br>
442
    Thousand
443
  </div>
444
  <div class="label">Signups</div>
445
</div>
446
```
447

448
### Advertisement
449

450
Advertisement placeholders for content monetization and promotional spaces.
451

452
```css { .api }
453
.ui.ad                        /* Advertisement container */
454

455
/* Ad sizes (standard IAB sizes) */
456
.ui.banner.ad                 /* 728x90 banner ad */
457
.ui.leaderboard.ad            /* 728x90 leaderboard ad */
458
.ui.medium.rectangle.ad       /* 300x250 medium rectangle ad */
459
.ui.large.rectangle.ad        /* 336x280 large rectangle ad */
460
.ui.half.page.ad              /* 300x600 half page ad */
461
.ui.small.rectangle.ad        /* 180x150 small rectangle ad */
462
.ui.vertical.banner.ad        /* 120x240 vertical banner ad */
463
.ui.button.ad                 /* 125x125 button ad */
464
.ui.square.ad                 /* 250x250 square ad */
465
.ui.small.square.ad           /* 200x200 small square ad */
466
.ui.skyscraper.ad             /* 120x600 skyscraper ad */
467
.ui.wide.skyscraper.ad        /* 160x600 wide skyscraper ad */
468

469
/* Mobile ad sizes */
470
.ui.mobile.banner.ad          /* 320x50 mobile banner ad */
471
.ui.mobile.leaderboard.ad     /* 320x50 mobile leaderboard ad */
472

473
/* Ad states */
474
.ui.centered.ad               /* Centered advertisement */
475
```
476

477
**Usage Examples:**
478

479
```html
480
<!-- Standard banner ad -->
481
<div class="ui banner ad" data-text="Advertisement"></div>
482

483
<!-- Medium rectangle ad -->
484
<div class="ui medium rectangle ad" data-text="Advertisement"></div>
485

486
<!-- Centered ad -->
487
<div class="ui centered banner ad" data-text="Advertisement"></div>
488

489
<!-- Mobile banner ad -->
490
<div class="ui mobile banner ad" data-text="Mobile Ad"></div>
491
```
492

493
## View Patterns
494

495
### Responsive Behavior
496
Views adapt to screen size changes:
497
```css { .api }
498
.ui.stackable.cards           /* Cards stack on mobile */
499
.ui.doubling.cards            /* Cards double up on larger screens */
500
.ui.stackable.statistics      /* Statistics stack on mobile */
501
```
502

503
### Color Variations
504
Views support standard color theming:
505
```css { .api }
506
.ui.red.statistic             /* Red colored statistic */
507
.ui.blue.card                 /* Blue colored card */
508
.ui.green.feed                /* Green colored feed */
509
```
510

511
### Size Variations
512
Views support the standard size scale:
513
```css { .api }
514
.ui.mini.statistic            /* Mini sized statistic */
515
.ui.small.comments            /* Small sized comments */
516
.ui.large.feed                /* Large sized feed */
517
```