igniteui-angular-samples/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.html at fc0414d00ccede2665648f5c942563c1de4797b7 · IgniteUI/igniteui-angular-samples · GitHub

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
<div class="card-sample">
    <igx-card>
        <igx-card-header>
            <h3 class="igx-card-header__title">Elevation</h3>
            <h5 class="igx-card-header__subtitle">subtitle</h5>
        </igx-card-header>
        <div style="overflow: hidden">
            <img
                width="100%"
                height="100%"
                src="assets/images/card/media/audi.jpg"
            />
        </div>
        <igx-card-content>
            <p class="igx-card-content__text">
                Consectetur adipisicing elit. Accusamus impedit laborum officiis
                voluptas. Alias aspernatur autem excepturi ipsam quidem
                repudiandae.
            </p>
        </igx-card-content>
        <igx-card-actions>
            <button igxButton igxRipple>Follow</button>
            <span igxStart igxIconButton="flat" igxRipple [igxRippleCentered]="true">
                <igx-icon fontSet="material">favorite</igx-icon>
            </span>
        </igx-card-actions>
    </igx-card>
</div>

<div class="card-sample custom-card">
    <igx-card>
        <igx-card-header>
            <h3 class="igx-card-header__title">Elevation Colors</h3>
            <h5 class="igx-card-header__subtitle">subtitle</h5>
        </igx-card-header>
        <div style="overflow: hidden">
            <img
                width="100%"
                height="100%"
                src="assets/images/card/media/audi.jpg"
            />
        </div>
        <igx-card-content>
            <p class="igx-card-content__text">
                Consectetur adipisicing elit. Accusamus impedit laborum officiis
                voluptas. Alias aspernatur autem excepturi ipsam quidem
                repudiandae.
            </p>
        </igx-card-content>
        <igx-card-actions>
            <button igxButton igxRipple>Follow</button>
            <span igxStart igxIconButton="flat" igxRipple [igxRippleCentered]="true">
                <igx-icon fontSet="material">favorite</igx-icon>
            </span>
        </igx-card-actions>
    </igx-card>
</div>