File: box-shadow.md

package info (click to toggle)
cockpit-podman 120-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 271,812 kB
  • sloc: javascript: 695,724; cpp: 11,141; python: 7,762; sh: 901; makefile: 156; xml: 90
file content (65 lines) | stat: -rw-r--r-- 2,144 bytes parent folder | download | duplicates (7) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
---
id: Box shadow
section: utility-classes
---import './box-shadow.css'

## Examples

### Small

```html
<div class="pf-v6-u-box-shadow-sm">Regular</div>
<div class="pf-v6-u-box-shadow-sm-top">Top</div>
<div class="pf-v6-u-box-shadow-sm-right">Right</div>
<div class="pf-v6-u-box-shadow-sm-bottom">Bottom</div>
<div class="pf-v6-u-box-shadow-sm-left">Left</div>

```

### Medium

```html
<div class="pf-v6-u-box-shadow-md">Regular</div>
<div class="pf-v6-u-box-shadow-md-top">Top</div>
<div class="pf-v6-u-box-shadow-md-right">Right</div>
<div class="pf-v6-u-box-shadow-md-bottom">Bottom</div>
<div class="pf-v6-u-box-shadow-md-left">Left</div>

```

### Large

```html
<div class="pf-v6-u-box-shadow-lg">Regular</div>
<div class="pf-v6-u-box-shadow-lg-top">Top</div>
<div class="pf-v6-u-box-shadow-lg-right">Right</div>
<div class="pf-v6-u-box-shadow-lg-bottom">Bottom</div>
<div class="pf-v6-u-box-shadow-lg-left">Left</div>

```

## Documentation

### Overview

Box shadow utility

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-u-box-shadow-sm` | `*` |  Applies box-shadow small. |
| `.pf-v6-u-box-shadow-sm-top` | `*` |  Applies box-shadow small top. |
| `.pf-v6-u-box-shadow-sm-right` | `*` |  Applies box-shadow small right. |
| `.pf-v6-u-box-shadow-sm-bottom` | `*` |  Applies box-shadow small bottom. |
| `.pf-v6-u-box-shadow-sm-left` | `*` |  Applies box-shadow small left. |
| `.pf-v6-u-box-shadow-md` | `*` |  Applies box-shadow medium. |
| `.pf-v6-u-box-shadow-md-top` | `*` |  Applies box-shadow medium top. |
| `.pf-v6-u-box-shadow-md-right` | `*` |  Applies box-shadow medium right. |
| `.pf-v6-u-box-shadow-md-bottom` | `*` |  Applies box-shadow medium bottom. |
| `.pf-v6-u-box-shadow-md-left` | `*` |  Applies box-shadow medium left. |
| `.pf-v6-u-box-shadow-lg` | `*` |  Applies box-shadow large. |
| `.pf-v6-u-box-shadow-lg-top` | `*` |  Applies box-shadow large top. |
| `.pf-v6-u-box-shadow-lg-right` | `*` |  Applies box-shadow large right. |
| `.pf-v6-u-box-shadow-lg-bottom` | `*` |  Applies box-shadow large bottom. |
| `.pf-v6-u-box-shadow-lg-left` | `*` |  Applies box-shadow large left. |