Image

import { Image } from '@zeal-ui/core';

<Image
    src="https://images.unsplash.com/photo-1494548162494-384bba4ab999"
    alt="nature"
    width="8rem"
    height="8rem"
/>;

<Image
    src="https://images.unsplash.com/photo-1494548162494-384bba4ab999"
    alt="nature"
    width="8rem"
    height="8rem"
    type="round"
/>;

<Image width="8rem" height="8rem" src="broken-link" />;

const ImageContainer = styled(Container)`
    .col{
        width: 12rem;
        height: 20rem;
        margin: 0.5rem;
    }

      
    .row{
        width: 15rem;
        height: 10rem;
        margin: 0.5rem;
    }

    .content{
        padding: 0rem 0.5rem;
    }

    @media(min-width: ${({ theme }) => theme.breakpoint.tabletPotrait}){
        flex-direction: row;

        .col{
            width: 15rem;
            height: 30rem;
        }

      
        .row{
            width: 30rem;
            height: 15rem;
        }
    }
`;

render(
    <ImageContainer type="col" width="100%">
        <Container type="col" withBorder className="col">
            <Image
                src="https://images.unsplash.com/photo-1494548162494-384bba4ab999"
                alt="nature"
                type="row"
            />
            <Text width="100%" height="90%" scrollAuto className="content">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                unknown printer took a galley of type and scrambled it to make a type specimen book.
            </Text>
        </Container>
        <Container type="row" withBorder className="row">
            <Image
                src="https://images.unsplash.com/photo-1494548162494-384bba4ab999"
                alt="nature"
                type="col"
            />
            <Text width="100%" height="90%" scrollAuto className="content">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                unknown printer took a galley of type and scrambled it to make a type specimen book.
            </Text>
        </Container>
    </ImageContainer>,
);