CardMedia Edit

CardMedia provides a container for media elements, and renders within a <Card />.

Usage Usage

import { Card, CardBody, CardMedia } from '@wordpress/components';

const Example = () => (
    <Card>
        <CardMedia>
            <img src="..." />
        </CardMedia>
        <CardBody>...</CardBody>
    </Card>
);

Top ↑

Placement Placement

<CardMedia /> can be placed in any order as a direct child of a <Card />. The styles will automatically round the corners of the inner media element.

Top Top

import { Card, CardBody, CardMedia } from '@wordpress/components';

const Example = () => (
    <Card>
        <CardMedia>
            <img src="..." />
        </CardMedia>
        <CardBody>...</CardBody>
    </Card>
);

Top ↑

Center Center

import { Card, CardBody, CardMedia } from '@wordpress/components';

const Example = () => (
    <Card>
        <CardBody>...</CardBody>
        <CardMedia>
            <img src="..." />
        </CardMedia>
        <CardBody>...</CardBody>
    </Card>
);

Top ↑

Bottom Bottom

import { Card, CardBody, CardMedia } from '@wordpress/components';

const Example = () => (
    <Card>
        <CardBody>...</CardBody>
        <CardMedia>
            <img src="..." />
        </CardMedia>
    </Card>
);

Top ↑

Only Only

<CardMedia /> can also exist as the only child component of <Card />.

import { Card, CardMedia } from '@wordpress/components';

const Example = () => (
    <Card>
        <CardMedia>
            <img src="..." />
        </CardMedia>
    </Card>
);