0
# Layout Components
1

2
Layout building blocks including cards, collections, grid system, and structural elements for organizing and presenting content with Material Design styling and responsive behavior.
3

4
## Capabilities
5

6
### Cards
7

8
Flexible content containers with shadows, actions, and various content layouts.
9

10
```html { .api }
11
<!-- Basic card -->
12
<div class="card">
13
  <div class="card-content">
14
    <span class="card-title">Card Title</span>
15
    <p>I am a very simple card. I am good at containing small bits of information.</p>
16
  </div>
17
  <div class="card-action">
18
    <a href="#">This is a link</a>
19
    <a href="#">This is a link</a>
20
  </div>
21
</div>
22

23
<!-- Card with image -->
24
<div class="card">
25
  <div class="card-image">
26
    <img src="images/sample-1.jpg">
27
    <span class="card-title">Card Title</span>
28
    <a class="btn-floating halfway-fab waves-effect waves-light red">
29
      <i class="material-icons">add</i>
30
    </a>
31
  </div>
32
  <div class="card-content">
33
    <p>I am a very simple card.</p>
34
  </div>
35
  <div class="card-action">
36
    <a href="#">This is a link</a>
37
  </div>
38
</div>
39

40
<!-- Horizontal card -->
41
<div class="card horizontal">
42
  <div class="card-image">
43
    <img src="images/sample-1.jpg">
44
  </div>
45
  <div class="card-stacked">
46
    <div class="card-content">
47
      <p>I am a very simple card.</p>
48
    </div>
49
    <div class="card-action">
50
      <a href="#">This is a link</a>
51
    </div>
52
  </div>
53
</div>
54

55
<!-- Card with reveal -->
56
<div class="card">
57
  <div class="card-image waves-effect waves-block waves-light">
58
    <img class="activator" src="images/office.jpg">
59
  </div>
60
  <div class="card-content">
61
    <span class="card-title activator grey-text text-darken-4">
62
      Card Title<i class="material-icons right">more_vert</i>
63
    </span>
64
    <p><a href="#">This is a link</a></p>
65
  </div>
66
  <div class="card-reveal">
67
    <span class="card-title grey-text text-darken-4">
68
      Card Title<i class="material-icons right">close</i>
69
    </span>
70
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
71
  </div>
72
</div>
73
```
74

75
**CSS Classes:**
76

77
```css { .api }
78
/* Card classes */
79
.card {
80
  /* Main card container */
81
  position: relative;
82
  margin: 0.5rem 0 1rem 0;
83
  background-color: #fff;
84
  border-radius: 2px;
85
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14);
86
}
87

88
.card-content {
89
  /* Card content area */
90
  padding: 24px;
91
  border-radius: 0 0 2px 2px;
92
}
93

94
.card-title {
95
  /* Card title styling */
96
  font-size: 24px;
97
  font-weight: 300;
98
  line-height: 32px;
99
  margin-bottom: 8px;
100
}
101

102
.card-action {
103
  /* Card action area */
104
  background-color: inherit;
105
  border-top: 1px solid rgba(160,160,160,0.2);
106
  position: relative;
107
  padding: 16px 24px;
108
}
109

110
.card-image {
111
  /* Card image area */
112
  position: relative;
113
}
114

115
.card-image img {
116
  /* Card images */
117
  display: block;
118
  border-radius: 2px 2px 0 0;
119
  position: relative;
120
  left: 0;
121
  right: 0;
122
  top: 0;
123
  bottom: 0;
124
  width: 100%;
125
}
126

127
.card-reveal {
128
  /* Card reveal overlay */
129
  padding: 24px;
130
  position: absolute;
131
  background-color: #fff;
132
  width: 100%;
133
  overflow-y: auto;
134
  left: 0;
135
  top: 100%;
136
  height: 100%;
137
  z-index: 3;
138
  display: none;
139
}
140

141
/* Card variations */
142
.card.small { height: 300px; }
143
.card.medium { height: 400px; }
144
.card.large { height: 500px; }
145

146
.card.horizontal {
147
  /* Horizontal card layout */
148
  display: flex;
149
}
150

151
.card.sticky-action .card-action {
152
  /* Sticky action area */
153
  z-index: 2;
154
}
155

156
.card-panel {
157
  /* Simple card without structured content */
158
  transition: box-shadow 0.25s;
159
  padding: 24px;
160
  margin: 0.5rem 0 1rem 0;
161
  border-radius: 2px;
162
  background-color: #fff;
163
}
164
```
165

166
### Collections
167

168
Lists and collections for displaying sets of related items.
169

170
```html { .api }
171
<!-- Basic collection -->
172
<ul class="collection">
173
  <li class="collection-item">Alvin</li>
174
  <li class="collection-item">Alvin</li>
175
  <li class="collection-item">Alvin</li>
176
  <li class="collection-item">Alvin</li>
177
</ul>
178

179
<!-- Collection with links -->
180
<div class="collection">
181
  <a href="#!" class="collection-item">Alvin</a>
182
  <a href="#!" class="collection-item active">Alvin</a>
183
  <a href="#!" class="collection-item">Alvin</a>
184
  <a href="#!" class="collection-item">Alvin</a>
185
</div>
186

187
<!-- Collection with headers -->
188
<ul class="collection with-header">
189
  <li class="collection-header"><h4>First Names</h4></li>
190
  <li class="collection-item">Alvin</li>
191
  <li class="collection-item">Alvin</li>
192
  <li class="collection-item">Alvin</li>
193
  <li class="collection-item">Alvin</li>
194
</ul>
195

196
<!-- Collection with secondary content -->
197
<ul class="collection">
198
  <li class="collection-item">
199
    <div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
200
  </li>
201
  <li class="collection-item">
202
    <div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
203
  </li>
204
</ul>
205

206
<!-- Avatar collection -->
207
<ul class="collection">
208
  <li class="collection-item avatar">
209
    <img src="images/yuna.jpg" alt="" class="circle">
210
    <span class="title">Title</span>
211
    <p>First Line <br> Second Line</p>
212
    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
213
  </li>
214
</ul>
215
```
216

217
**CSS Classes:**
218

219
```css { .api }
220
/* Collection classes */
221
.collection {
222
  /* Collection container */
223
  margin: 0.5rem 0 1rem 0;
224
  border: 1px solid #e0e0e0;
225
  border-radius: 2px;
226
  overflow: hidden;
227
  position: relative;
228
}
229

230
.collection-item {
231
  /* Individual collection item */
232
  background-color: #fff;
233
  line-height: 1.5rem;
234
  padding: 10px 20px;
235
  margin: 0;
236
  border-bottom: 1px solid #e0e0e0;
237
}
238

239
.collection-item.active {
240
  /* Active collection item */
241
  background-color: #26a69a;
242
  color: #eafaf9;
243
}
244

245
.collection-header {
246
  /* Collection header */
247
  background-color: #fff;
248
  border-bottom: 1px solid #e0e0e0;
249
  padding: 10px 20px;
250
}
251

252
.collection-item.avatar {
253
  /* Avatar collection item */
254
  min-height: 84px;
255
  padding-left: 72px;
256
  position: relative;
257
}
258

259
.collection-item.avatar img.circle {
260
  /* Avatar image */
261
  position: absolute;
262
  width: 42px;
263
  height: 42px;
264
  overflow: hidden;
265
  left: 15px;
266
  display: inline-block;
267
  vertical-align: middle;
268
}
269

270
.collection-item .title {
271
  /* Collection item title */
272
  font-size: 16px;
273
  font-weight: 500;
274
  color: #212121;
275
  display: block;
276
  margin: 0;
277
}
278

279
.collection-item p {
280
  /* Collection item description */
281
  margin: 0;
282
  color: #424242;
283
}
284

285
.secondary-content {
286
  /* Secondary content (icons, actions) */
287
  float: right;
288
  color: #26a69a;
289
}
290
```
291

292
### Tables
293

294
Responsive tables with Material Design styling.
295

296
```html { .api }
297
<!-- Basic table -->
298
<table>
299
  <thead>
300
    <tr>
301
        <th>Name</th>
302
        <th>Item Name</th>
303
        <th>Item Price</th>
304
    </tr>
305
  </thead>
306
  <tbody>
307
    <tr>
308
      <td>Alvin</td>
309
      <td>Eclair</td>
310
      <td>$0.87</td>
311
    </tr>
312
    <tr>
313
      <td>Alan</td>
314
      <td>Jellybean</td>
315
      <td>$3.76</td>
316
    </tr>
317
  </tbody>
318
</table>
319

320
<!-- Striped table -->
321
<table class="striped">
322
  <thead>
323
    <tr>
324
        <th>Name</th>
325
        <th>Item Name</th>
326
        <th>Item Price</th>
327
    </tr>
328
  </thead>
329
  <tbody>
330
    <tr>
331
      <td>Alvin</td>
332
      <td>Eclair</td>
333
      <td>$0.87</td>
334
    </tr>
335
  </tbody>
336
</table>
337

338
<!-- Highlighted table -->
339
<table class="highlight">
340
  <thead>
341
    <tr>
342
        <th>Name</th>
343
        <th>Item Name</th>
344
        <th>Item Price</th>
345
    </tr>
346
  </thead>
347
  <tbody>
348
    <tr>
349
      <td>Alvin</td>
350
      <td>Eclair</td>
351
      <td>$0.87</td>
352
    </tr>
353
  </tbody>
354
</table>
355

356
<!-- Centered table -->
357
<table class="centered">
358
  <thead>
359
    <tr>
360
        <th>Name</th>
361
        <th>Item Name</th>
362
        <th>Item Price</th>
363
    </tr>
364
  </thead>
365
  <tbody>
366
    <tr>
367
      <td>Alvin</td>
368
      <td>Eclair</td>
369
      <td>$0.87</td>
370
    </tr>
371
  </tbody>
372
</table>
373

374
<!-- Responsive table -->
375
<table class="responsive-table">
376
  <thead>
377
    <tr>
378
        <th>Name</th>
379
        <th>Item Name</th>
380
        <th>Item Price</th>
381
    </tr>
382
  </thead>
383
  <tbody>
384
    <tr>
385
      <td>Alvin</td>
386
      <td>Eclair</td>
387
      <td>$0.87</td>
388
    </tr>
389
  </tbody>
390
</table>
391
```
392

393
**CSS Classes:**
394

395
```css { .api }
396
/* Table classes */
397
table {
398
  /* Basic table styling */
399
  width: 100%;
400
  display: table;
401
  border-collapse: collapse;
402
  border-spacing: 0;
403
}
404

405
table.striped > tbody > tr:nth-child(odd) {
406
  /* Striped table rows */
407
  background-color: rgba(242, 242, 242, 0.5);
408
}
409

410
table.striped > tbody > tr > td {
411
  /* Striped table cells */
412
  border-radius: 0;
413
}
414

415
table.highlight > tbody > tr {
416
  /* Highlighted table rows */
417
  transition: background-color 0.25s ease;
418
}
419

420
table.highlight > tbody > tr:hover {
421
  /* Highlighted table hover */
422
  background-color: rgba(242, 242, 242, 0.5);
423
}
424

425
table.centered thead tr th,
426
table.centered tbody tr td {
427
  /* Centered table content */
428
  text-align: center;
429
}
430

431
.responsive-table {
432
  /* Responsive table wrapper */
433
  display: block;
434
  width: 100%;
435
  overflow-x: auto;
436
  white-space: nowrap;
437
}
438

439
/* Table elements */
440
thead {
441
  /* Table header */
442
  border-bottom: 1px solid rgba(0,0,0,0.12);
443
}
444

445
td, th {
446
  /* Table cells */
447
  padding: 15px 5px;
448
  display: table-cell;
449
  text-align: left;
450
  vertical-align: middle;
451
  border-radius: 2px;
452
}
453

454
th {
455
  /* Table headers */
456
  font-weight: 500;
457
  color: #757575;
458
}
459

460
td {
461
  /* Table data cells */
462
  color: rgba(0,0,0,0.87);
463
  border-bottom: 1px solid rgba(0,0,0,0.12);
464
}
465
```
466

467
### Badges
468

469
Small status indicators and notification badges.
470

471
```html { .api }
472
<!-- Basic badges -->
473
<span class="badge">1</span>
474
<span class="new badge">4</span>
475
<span class="badge blue">New</span>
476

477
<!-- Badges in collections -->
478
<ul class="collection">
479
  <li class="collection-item">Inbox<span class="badge">12</span></li>
480
  <li class="collection-item">Unread<span class="new badge">4</span></li>
481
  <li class="collection-item">Sent<span class="badge">0</span></li>
482
</ul>
483

484
<!-- Badges in navigation -->
485
<ul class="collection">
486
  <li class="collection-item">
487
    <span class="badge new">New</span>
488
    First Item
489
  </li>
490
</ul>
491
```
492

493
**CSS Classes:**
494

495
```css { .api }
496
/* Badge classes */
497
.badge {
498
  /* Basic badge */
499
  min-width: 3rem;
500
  padding: 0 6px;
501
  margin-left: 14px;
502
  text-align: center;
503
  font-size: 1rem;
504
  line-height: 22px;
505
  height: 22px;
506
  color: #757575;
507
  float: right;
508
  box-sizing: border-box;
509
}
510

511
.badge.new {
512
  /* New badge with emphasis */
513
  font-weight: 300;
514
  font-size: 0.8rem;
515
  color: #fff;
516
  background-color: #26a69a;
517
  border-radius: 2px;
518
}
519

520
.badge.new:after {
521
  /* New badge indicator */
522
  content: " new";
523
}
524

525
/* Badge colors */
526
.badge.red { background-color: #F44336; color: #fff; }
527
.badge.pink { background-color: #E91E63; color: #fff; }
528
.badge.purple { background-color: #9C27B0; color: #fff; }
529
.badge.blue { background-color: #2196F3; color: #fff; }
530
.badge.cyan { background-color: #00BCD4; color: #fff; }
531
.badge.teal { background-color: #009688; color: #fff; }
532
.badge.green { background-color: #4CAF50; color: #fff; }
533
.badge.yellow { background-color: #FFEB3B; color: #000; }
534
.badge.orange { background-color: #FF9800; color: #fff; }
535
```
536

537
### Dividers
538

539
Visual separators for organizing content sections.
540

541
```html { .api }
542
<!-- Basic divider -->
543
<div class="divider"></div>
544

545
<!-- Section divider -->
546
<div class="section">
547
  <h5>Section 1</h5>
548
  <p>Content goes here</p>
549
</div>
550
<div class="divider"></div>
551
<div class="section">
552
  <h5>Section 2</h5>
553
  <p>Content goes here</p>
554
</div>
555

556
<!-- Divider in collections -->
557
<ul class="collection">
558
  <li class="collection-item">Item 1</li>
559
  <li class="divider"></li>
560
  <li class="collection-item">Item 2</li>
561
</ul>
562
```
563

564
**CSS Classes:**
565

566
```css { .api }
567
/* Divider classes */
568
.divider {
569
  /* Horizontal divider line */
570
  height: 1px;
571
  overflow: hidden;
572
  background-color: #e0e0e0;
573
}
574

575
.section {
576
  /* Content section */
577
  padding-top: 1rem;
578
  padding-bottom: 1rem;
579
}
580

581
/* Collection dividers */
582
.collection .divider {
583
  /* Divider in collections */
584
  border-bottom: none;
585
  height: 1px;
586
  background-color: #e0e0e0;
587
  margin: 0;
588
}
589
```
590

591
### Footers
592

593
Page footers with links, copyright, and additional information.
594

595
```html { .api }
596
<!-- Basic footer -->
597
<footer class="page-footer">
598
  <div class="container">
599
    <div class="row">
600
      <div class="col l6 s12">
601
        <h5 class="white-text">Footer Content</h5>
602
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
603
      </div>
604
      <div class="col l4 offset-l2 s12">
605
        <h5 class="white-text">Links</h5>
606
        <ul>
607
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
608
          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
609
          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
610
          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
611
        </ul>
612
      </div>
613
    </div>
614
  </div>
615
  <div class="footer-copyright">
616
    <div class="container">
617
      © 2014 Copyright Text
618
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
619
    </div>
620
  </div>
621
</footer>
622

623
<!-- Sticky footer -->
624
<body>
625
  <main>
626
    <!-- Main content -->
627
  </main>
628
  <footer class="page-footer">
629
    <!-- Footer content -->
630
  </footer>
631
</body>
632
```
633

634
**CSS Classes:**
635

636
```css { .api }
637
/* Footer classes */
638
.page-footer {
639
  /* Main footer container */
640
  background-color: #ee6e73;
641
  padding-top: 20px;
642
  color: #fff;
643
}
644

645
.footer-copyright {
646
  /* Copyright section */
647
  font-weight: 300;
648
  overflow: hidden;
649
  background-color: rgba(51, 51, 51, 0.08);
650
  padding: 10px 0px;
651
}
652

653
/* Sticky footer layout */
654
body {
655
  display: flex;
656
  min-height: 100vh;
657
  flex-direction: column;
658
}
659

660
main {
661
  flex: 1 0 auto;
662
}
663
```
664

665
## Responsive Layout Patterns
666

667
### Container Widths
668

669
```css { .api }
670
/* Container responsive widths */
671
.container {
672
  margin: 0 auto;
673
  max-width: 1280px;
674
  width: 90%;
675
}
676

677
@media only screen and (min-width: 601px) {
678
  .container {
679
    width: 85%;
680
  }
681
}
682

683
@media only screen and (min-width: 993px) {
684
  .container {
685
    width: 70%;
686
  }
687
}
688
```
689

690
### Section Spacing
691

692
```css { .api }
693
/* Section spacing utilities */
694
.section {
695
  padding-top: 1rem;
696
  padding-bottom: 1rem;
697
}
698

699
.section.no-pad {
700
  /* Remove section padding */
701
  padding: 0;
702
}
703

704
.section.no-pad-bot {
705
  /* Remove bottom padding */
706
  padding-bottom: 0;
707
}
708

709
.section.no-pad-top {
710
  /* Remove top padding */
711
  padding-top: 0;
712
}
713
```
714

715
### Card Layouts
716

717
```html
718
<!-- Card grid layout -->
719
<div class="row">
720
  <div class="col s12 m6 l4">
721
    <div class="card">
722
      <div class="card-content">
723
        <span class="card-title">Card 1</span>
724
        <p>Content for card 1</p>
725
      </div>
726
    </div>
727
  </div>
728
  <div class="col s12 m6 l4">
729
    <div class="card">
730
      <div class="card-content">
731
        <span class="card-title">Card 2</span>
732
        <p>Content for card 2</p>
733
      </div>
734
    </div>
735
  </div>
736
  <div class="col s12 m6 l4">
737
    <div class="card">
738
      <div class="card-content">
739
        <span class="card-title">Card 3</span>
740
        <p>Content for card 3</p>
741
      </div>
742
    </div>
743
  </div>
744
</div>
745
```