Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
74 lines (58 sloc) 2.06 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import CardBasic from 'examples/card/basic.js'; import CardWithImageCta from 'examples/card/image-cta.js'; import CardWithThumbnailCta from 'examples/card/thumbnail-cta.js';

import Overrides from '../../components/overrides'; import {Card, StyledBody, StyledAction, StyledThumbnail} from 'baseui/card'; import {Button} from 'baseui/button'; import * as CardExports from 'baseui/card';

export default Layout;

Card

Cards are a self-contained unit of information, usually as part of a feed or series of similar content. Cards have a dynamic range of modifiers that allow text-only, text and illustration, and photography. All cards have an option to include text links or buttons as a primary action. The entire card can become an active click-target.

Examples

<Example title="Card with thumbnail and call to action" path="card/thumbnail-cta.js"

Overrides

<Overrides name="Card" component={CardExports} renderExample={props => ( <div style={{width: '328px'}}> <Card overrides={props.overrides} action={<Button style={{width: '100%'}}>Button Label} headerImage={'https://source.unsplash.com/user/erondu/700x400'} title="Example card" thumbnail={'https://source.unsplash.com/user/erondu/300x300'} > Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl. )} />

API

<API heading="Card API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/card/card.js')} />

You can’t perform that action at this time.