Basic card
Example
Title
1
2
3
4
5
<div class="ox-card">
<div class="ox-card__content">
<h4>Title</h4>
</div>
</div>
Card with action
By adding the modifier .ox-card--has-action to the card, you activate a hover and activate state for the card to imply the card has and action.
Example
1
2
3
4
5
<a href="#" class="ox-card ox-card--has-action">
<div class="ox-card__content">
<h4>Title</h4>
</div>
</a>
If needed, the card can also be a button.
Example
1
2
3
4
5
<button type="button" class="ox-card ox-card--has-action">
<div class="ox-card__content">
<h4>Title</h4>
</div>
</button>
Card list
By adding a .card-list wrapper around the cards, the margin will be removed and the items will visually look more like they're related to one another.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="ox-card-list">
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<button type="button" class="ox-card__content">
<h4>Title</h4>
</button>
</li>
</ul>
If needed, the modifier .ox-card-list--blocks can be added.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="ox-card-list ox-card-list--blocks">
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
</ul>
In certain situations it can be nice to have an extra hover effect on card lists. All you have to do to get the same result as displayed below is to add the class .ox-card-list--hover-effect to the list.
Example
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
<ul class="ox-card-list ox-card-list--hover-effect">
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
</ul>
<ul class="ox-card-list ox-card-list--blocks ox-card-list--hover-effect">
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
<li class="ox-card ox-card--has-action">
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</li>
</ul>
Expandable Cards
Use expandable cards when detail information is at hand but not immediatly needed to be visible.
Example
Order #19305300
This content is hidden by default but can be visible as you just toggled the visibility.
1
2
3
4
5
6
7
8
<details class="ox-card ox-card--has-details">
<summary class="ox-card__content">
<h4>Order #19305300</h4>
</summary>
<div class="ox-card__details">
This content is hidden by default but can be visible as you just toggled the visibility.
</div>
</details>
The action modifier can used on the expandable card. When there's need for navigation to a detail page, provide a url with a clear description in the summary tag.
Example
Order #19305301
This content is hidden by default but can be visible as you just toggled the visibility.
1
2
3
4
5
6
7
8
9
10
<details class="ox-card ox-card--has-action ox-card--has-details">
<summary class="ox-card__content">
<h4>
<a href="#">Order #19305301</a>
</h4>
</summary>
<div class="ox-card__details">
This content is hidden by default but can be visible as you just toggled the visibility.
</div>
</details>
Media container
If any type of media needs to be shown in a card, you can wrap it in a .ox-card__media class. If needed, the modifier .ox-card__media--padded can be added to add a background-color and extra padding around the image, video, ...
Example
1
2
3
4
5
6
7
8
<div class="ox-card ox-card--has-action">
<a href="#" class="ox-card__media ox-card__media--padded">
<svg viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg" style="max-height: 140px"><g id="page-layout-example" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="default-layout" fill-rule="nonzero"><rect id="page" stroke="#C6D9D9" fill="#FFFFFF" x="0.5" y="0.5" width="199" height="139" rx="3"></rect><g id="header"><path d="M3,0 L197,-4.4408921e-16 C198.656854,-7.48448398e-16 200,1.34314575 200,3 L200,20.1438849 L0,20.1438849 L-4.4408921e-16,3 C-6.46995335e-16,1.34314575 1.34314575,-1.39730022e-16 3,-4.4408921e-16 Z" fill="#C6D9D9"></path><rect id="header-icon" fill="#FFFFFF" x="8" y="6.04316547" width="19.1919192" height="8.05755396" rx="4"></rect></g><g id="primary-nav" transform="translate(0.000000, 19.136691)"><rect id="nav" stroke="#C6D9D9" fill="#FFFFFF" x="0.5" y="0.5" width="199" height="19.1438849"></rect><rect id="nav-item" fill="#C6D9D9" x="90.9090909" y="8.05755396" width="24.2424242" height="4.02877698" rx="2.01438849"></rect><rect id="nav-item" fill="#C6D9D9" x="64.6464646" y="8.05755396" width="18.1818182" height="4.02877698" rx="2.01438849"></rect><rect id="nav-item" fill="#C6D9D9" x="33.3333333" y="8.05755396" width="23.2323232" height="4.02877698" rx="2.01438849"></rect><rect id="nav-item" fill="#C6D9D9" x="8" y="8.05755396" width="17.1717172" height="4.02877698" rx="2.01438849"></rect></g></g></g></svg>
</a>
<a href="#" class="ox-card__content">
<h4>Title</h4>
</a>
</div>