@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
51 lines (40 loc) • 1.51 kB
Markdown
#### A Card like any container improves scannability of a design when well used. What sets the Card apart is that it has higher visual prominence and invites interactivity with its fancy drop shadow.
### 👍 Dos
- It works best when used as a big button.
- Do use buttons inside it if you need, but keep it simple.
### 👎 Don'ts
- Don't nest cards.
- Avoid using it to encompass the entirety of a page.
### Related components
- In doubt prefer using a simple <a href="#/Components/Containers/Box">Box</a>.
Default
```js
<div style={{ padding: '80px', color: '#585959', background: '#fafafa' }}>
<Card>
<h3>Build for community</h3>
<p>
It’s all about being ready to grow and reach new levels. Have a solid
foundation, modular thinking and flexible essence, and you’re building for
scale. We are global but we’re audacious enough to aim for the stars.
</p>
</Card>
</div>
```
Full width
```js
<div style={{ padding: '80px', color: '#585959', background: '#fafafa' }}>
<Card noPadding>
<h3 className="pl6 pr6 pt6">Our people</h3>
<img
width="100%"
src="https://careers.vtex.com/assets/media/perspectives03.jpg"
/>
<p className="ph6 pb6">
At VTEX we believe inclusion inspires innovation. We are committed to
implement a recruiting process that guarantees equal opportunities for
all, regardless of ethnicity, gender, disability, sexual orientation,
gender identity or religion.
</p>
</Card>
</div>
```