-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcomponent-card.html
116 lines (116 loc) · 8.21 KB
/
component-card.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title>Card | Component | MNML CSS Framework</title>
<link rel="stylesheet" type="text/css" href="src/styles/main.css">
</head>
<body class="c-mnml-body">
<header role="banner" class="c-mnml-plane c-mnml-plane--trendy c-mnml-plane--trendy-af c-mnml-plane--article-width c-mnml-plane--h-inset-medium c-mnml-plane--v-inset-xxlarge cs-mnml-dark u-mnml-text-align-center">
<div class="c-mnml-plane-background">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
</div>
<div class="c-mnml-plane-cabin">
<p class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--xsmall">Component</p>
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--display">Card</h1>
</div>
</header>
<main class="c-mnml-plane c-mnml-plane--article-width c-mnml-plane--h-inset-medium c-mnml-plane--v-inset-large">
<article class="c-mnml-plane-cabin">
<h2 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--xxlarge">Base</h2>
<p class="c-mnml-text c-mnml-text--block">This is the default card.</p>
<article class="c-mnml-card">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--large">Card heading</h1>
<p class="c-mnml-text c-mnml-text--block">Card body text.</p>
</article>
<pre class="c-mnml-code-block" data-code="html"><code class="c-mnml-code"><article class="c-mnml-card">
<img src="path/img.jpg" alt="Image alt text.">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--large">Card heading</h1>
<p class="c-mnml-text c-mnml-text--block">Card body text.</p>
</article></code></pre>
<h2 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--xxlarge">Card List</h2>
<p class="c-mnml-text c-mnml-text--block">This component can be combined with the List component.</p>
<h3 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--xlarge">Default Card List</h3>
<div class="c-mnml-list c-mnml-list--bare is-compact lay-horizontal">
<div class="c-mnml-list__item">
<article class="c-mnml-card c-mnml-card--full-height">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--small">Card 1</h1>
<p class="c-mnml-text c-mnml-text--block c-mnml-text--small">Card body text.</p>
<button type="button" class="c-mnml-button c-mnml-button--block u-mnml-margin-top-auto is-compact">
Button
</button>
</article>
</div>
<div class="c-mnml-list__item">
<article class="c-mnml-card c-mnml-card--full-height">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--small">Card 2</h1>
<p class="c-mnml-text c-mnml-text--block c-mnml-text--small">Card body text. And some more text. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.</p>
<ul class="c-mnml-list c-mnml-list--bare lay-horizontal is-compact u-mnml-margin-top-auto" style="--mnml-list-item-basis: auto;">
<li class="c-mnml-list__item">
<button type="button" class="c-mnml-button c-mnml-button--block is-compact">
Button 1
</button>
</li>
<li class="c-mnml-list__item">
<button type="button" class="c-mnml-button c-mnml-button--block is-compact">
Button 2
</button>
</li>
</ul>
</article>
</div>
<div class="c-mnml-list__item">
<article class="c-mnml-card c-mnml-card--full-height">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--small">Card 3</h1>
<p class="c-mnml-text c-mnml-text--block c-mnml-text--small">Card body text.</p>
<button type="button" class="c-mnml-button c-mnml-button--block u-mnml-margin-top-auto is-compact">
Button
</button>
</article>
</div>
</div>
<h3 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--xlarge">Clickable Card List</h3>
<div class="c-mnml-list c-mnml-list--bare is-compact lay-horizontal">
<div class="c-mnml-list__item">
<article class="c-mnml-card c-mnml-card--full-height c-mnml-card--clickable">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--small">
<a href="javascript:" class="c-mnml-link c-mnml-link--expand-click-target">Card 1 (link)</a>
</h1>
<p class="c-mnml-text c-mnml-text--block c-mnml-text--small">Card body text.</p>
</article>
</div>
<div class="c-mnml-list__item">
<article class="c-mnml-card c-mnml-card--full-height c-mnml-card--clickable">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--small">
<button type="button" class="c-mnml-link c-mnml-link--expand-click-target">Card 2 (button)</button>
</h1>
<p class="c-mnml-text c-mnml-text--block c-mnml-text--small">Card body text. And some more text. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.</p>
</article>
</div>
<div class="c-mnml-list__item">
<article class="c-mnml-card c-mnml-card--full-height c-mnml-card--clickable">
<img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
<h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--small">
<a href="javascript:" class="c-mnml-link c-mnml-link--expand-click-target">Card 3</a>
</h1>
<p class="c-mnml-text c-mnml-text--block c-mnml-text--small">Card body text.</p>
</article>
</div>
</div>
<h2 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--xxlarge">Image Card</h2>
<p class="c-mnml-text c-mnml-text--block">Use the <code class="c-mnml-code">figure</code> and <code class="c-mnml-code">figcaption</code> tags to create an image card.</p>
<figure class="c-mnml-card">
<a href="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" target="_blank"><img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image"></a>
<figcaption>
Fig 1: this is an image card.
</figcaption>
</figure>
</article>
</main>
</body>
</html>