879 lines
34 KiB
JavaScript
Executable File
879 lines
34 KiB
JavaScript
Executable File
import React from 'react';
|
|
import { faker } from '@faker-js/faker/locale/fr';
|
|
|
|
import {
|
|
Container,
|
|
Avatar,
|
|
AvatarAddOn,
|
|
Media,
|
|
Row,
|
|
Button,
|
|
Col,
|
|
Card,
|
|
CustomInput,
|
|
CardImg,
|
|
CardImgOverlay,
|
|
CardBody,
|
|
CardText,
|
|
CardTitle,
|
|
CardFooter,
|
|
HolderProvider
|
|
} from './../../../components';
|
|
import { randomAvatar } from './../../../utilities';
|
|
import { HeaderMain } from "../../components/HeaderMain";
|
|
import { HeaderDemo } from "../../components/HeaderDemo";
|
|
|
|
const Images = () => (
|
|
<Container>
|
|
<HeaderMain
|
|
title="Images"
|
|
className="mb-5 mt-4"
|
|
/>
|
|
{ /* START Header 1 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={4}
|
|
title="Images"
|
|
subTitle="Documentation and examples for opting images into responsive behavior."
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 1 */}
|
|
{ /* START Section 1 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<h6 className="">
|
|
Images: Responsive Images
|
|
<small className="text-muted">#1.01</small>
|
|
</h6>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
className="mb-3"
|
|
>
|
|
<CardImg className="img-fluid mb-5" />
|
|
</HolderProvider.Icon>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col lg={ 12 } className="mb-5">
|
|
<h6 className="mb-2">
|
|
Images: Thumbnails
|
|
<small className="text-muted">#1.02</small>
|
|
</h6>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={200}
|
|
height={200}
|
|
>
|
|
<CardImg
|
|
className="img-thumbnail mr-2"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={200}
|
|
height={200}
|
|
>
|
|
<CardImg
|
|
className="img-thumbnail mr-2"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={200}
|
|
height={200}
|
|
>
|
|
<CardImg
|
|
className="img-thumbnail mr-2"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={200}
|
|
height={200}
|
|
>
|
|
<CardImg
|
|
className="img-thumbnail"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<h6 className="mb-2">
|
|
Images: Aligning
|
|
<small className="text-muted">#1.03</small>
|
|
</h6>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={200}
|
|
height={200}
|
|
>
|
|
<CardImg
|
|
className="rounded float-left"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={200}
|
|
height={200}
|
|
>
|
|
<CardImg
|
|
className="rounded float-right"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
</Col>
|
|
<Col lg={ 12 } className="mb-5">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={200}
|
|
height={200}
|
|
>
|
|
<CardImg
|
|
className="rounded mx-auto d-block"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col lg={ 12 } className="mb-5">
|
|
<h6 className="mb-2">
|
|
Images: Figures
|
|
<small className="text-muted">#1.04</small>
|
|
</h6>
|
|
<figure className="figure mr-2">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={400}
|
|
height={400}
|
|
>
|
|
<CardImg
|
|
className="figure-img img-fluid rounded"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption">
|
|
A caption for the above image.
|
|
</figcaption>
|
|
</figure>
|
|
<figure className="figure">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={400}
|
|
height={400}
|
|
>
|
|
<CardImg
|
|
className="figure-img img-fluid rounded"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption text-right">
|
|
A caption for the above image.
|
|
</figcaption>
|
|
</figure>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col lg={ 12 } className="mb-5">
|
|
<h6 className="mb-2">
|
|
Images: Styles
|
|
<small className="text-muted">#1.05</small>
|
|
</h6>
|
|
<figure className="figure mr-2">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={125}
|
|
height={125}
|
|
>
|
|
<CardImg
|
|
className="rounded"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption">
|
|
<code>.rounded</code>
|
|
</figcaption>
|
|
</figure>
|
|
<figure className="figure mr-2">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={125}
|
|
height={125}
|
|
>
|
|
<CardImg
|
|
className="rounded-top"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption">
|
|
<code>.rounded-top</code>
|
|
</figcaption>
|
|
</figure>
|
|
<figure className="figure mr-2">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={125}
|
|
height={125}
|
|
>
|
|
<CardImg
|
|
className="rounded-right"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption">
|
|
<code>.rounded-right</code>
|
|
</figcaption>
|
|
</figure>
|
|
<figure className="figure mr-2">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={125}
|
|
height={125}
|
|
>
|
|
<CardImg
|
|
className="rounded-bottom"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption">
|
|
<code>.rounded-bottom</code>
|
|
</figcaption>
|
|
</figure>
|
|
<figure className="figure mr-2">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={125}
|
|
height={125}
|
|
>
|
|
<CardImg
|
|
className="rounded-left"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption">
|
|
<code>.rounded-left</code>
|
|
</figcaption>
|
|
</figure>
|
|
<figure className="figure mr-2">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
width={125}
|
|
height={125}
|
|
>
|
|
<CardImg
|
|
className="rounded-circle"
|
|
/>
|
|
</HolderProvider.Icon>
|
|
<figcaption className="figure-caption">
|
|
<code>.rounded-circle</code>
|
|
</figcaption>
|
|
</figure>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Section 1 */}
|
|
|
|
{ /* START Header 2 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={2}
|
|
title="Images: Title Options"
|
|
className="mt-5"
|
|
subTitle="Documentation and examples for opting images into responsive behavior."
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 2 */}
|
|
{ /* START Section 2 */}
|
|
<Row>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">Default Title</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#2.01</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<CardTitle className="d-flex h6 mb-0">
|
|
<span className="">Icon Right Title</span>
|
|
<i className="fa fa-info-circle ml-auto"></i>
|
|
</CardTitle>
|
|
</CardBody>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardText>
|
|
<span className="text-muted mr-2">#2.03</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
<a href="#">
|
|
Link Title
|
|
</a>
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#2.02</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
<i className="fa fa-play-circle mr-2"></i>
|
|
Icon Left Title
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#2.03</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Section 2 */}
|
|
|
|
{ /* START Header 3 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={3}
|
|
title="Images: Heading Options"
|
|
className="mt-5"
|
|
subTitle="Documentation and examples for opting images into responsive behavior."
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 3 */}
|
|
{ /* START Section 3 */}
|
|
<Row>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<CardTitle className="d-flex h6 mb-0">
|
|
Default Title
|
|
</CardTitle>
|
|
</CardBody>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#3.01</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<CardTitle className="d-flex h6 mb-0">
|
|
Icon Right Title
|
|
<i className="fa fa-info-circle ml-auto"></i>
|
|
</CardTitle>
|
|
</CardBody>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#3.04</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<CardTitle className="d-flex h6 mb-0">
|
|
<a href="#">Link Title</a>
|
|
</CardTitle>
|
|
</CardBody>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#3.02</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<CardTitle className="d-flex h6 mb-0">
|
|
<CustomInput type="checkbox" id="checkboxLeftTitle" label="Checkbox Left Title" />
|
|
</CardTitle>
|
|
</CardBody>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#3.03</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<CardTitle className="d-flex h6 mb-0">
|
|
<i className="fa fa-play-circle mr-2"></i>
|
|
Icon Left Title
|
|
</CardTitle>
|
|
</CardBody>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#3.05</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<CardBody>
|
|
<CardTitle className="d-flex h6 mb-0">
|
|
<span>Checkbox Right Title</span>
|
|
<CustomInput type="checkbox" id="checkboxRightTitle" label="" className="ml-auto mb-0" />
|
|
</CardTitle>
|
|
</CardBody>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#3.06</span>
|
|
{ faker.lorem.sentences() }
|
|
</CardText>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Section 3 */}
|
|
|
|
{ /* START Header 4 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={4}
|
|
title="Images: Footer Options"
|
|
className="mt-5"
|
|
subTitle="Documentation and examples for opting images into responsive behavior."
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 4 */}
|
|
{ /* START Section 4 */}
|
|
<Row>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
{ faker.lorem.sentence() }
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#4.01</span>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</CardBody>
|
|
<CardFooter className="d-flex">
|
|
<div className="mr-auto">
|
|
<span className="mr-3">
|
|
<i className="fa-heart fa mr-1"></i> 9
|
|
</span>
|
|
<span className="mr-3">
|
|
<i className="fa-comment fa mr-1"></i> 37
|
|
</span>
|
|
</div>
|
|
<span>4 Minutes Ago</span>
|
|
</CardFooter>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
{ faker.lorem.sentence() }
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#4.04</span>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</CardBody>
|
|
<CardFooter className="d-flex">
|
|
<a href="#">
|
|
Read More
|
|
<i className="fa fa-angle-right ml-2"></i>
|
|
</a>
|
|
<div className="align-self-center ml-auto">
|
|
<i className="fa-star-o fa"></i>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
{ faker.lorem.sentence() }
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#4.02</span>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</CardBody>
|
|
<CardFooter className="d-flex">
|
|
<div className="mr-auto">
|
|
<i className="fa-heart-o fa mr-1"></i> 9
|
|
</div>
|
|
<div>
|
|
<i className="fa-eye fa mr-1"></i> 87
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
{ faker.lorem.sentence() }
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#4.05</span>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</CardBody>
|
|
<CardFooter className="d-flex">
|
|
<Media>
|
|
<Media left middle className="mr-3">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="danger"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-0">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
2 Days Ago
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
<div className="align-self-center ml-auto">
|
|
<i className="fa-heart-o fa"></i>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={ 4 }>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
{ faker.lorem.sentence() }
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2 ">#4.03</span>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</CardBody>
|
|
<CardFooter className="d-flex">
|
|
<Button color="primary mr-auto">
|
|
Read More
|
|
<i className="fa fa-angle-right ml-2"></i>
|
|
</Button>{' '}
|
|
<div className="align-self-center">
|
|
16 Min. Ago
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg top />
|
|
</HolderProvider.Icon>
|
|
<CardBody>
|
|
<CardTitle className="h6">
|
|
{ faker.lorem.sentence() }
|
|
</CardTitle>
|
|
<CardText>
|
|
<span className="text-muted mr-2">#4.06</span>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</CardBody>
|
|
<CardFooter className="d-flex">
|
|
<div>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
className="mr-2"
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="success"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
className="mr-2"
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="warning"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
className="mr-2"
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className="align-self-center ml-auto">
|
|
<i className="fa-heart-o fa"></i>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Section 4 */}
|
|
|
|
{ /* START Header 5 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={5}
|
|
title="Images: Image Overlays"
|
|
className="mt-5"
|
|
subTitle="Documentation and examples for opting images into responsive behavior."
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 5 */}
|
|
{ /* START Section 5 */}
|
|
<Row>
|
|
<Col lg={ 4 }>
|
|
<Card>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg />
|
|
</HolderProvider.Icon>
|
|
<CardImgOverlay className="d-flex align-content-between flex-wrap">
|
|
<span>
|
|
<p className="card-text mt-0">
|
|
<span className="badge badge-primary">
|
|
Sport
|
|
</span>
|
|
</p>
|
|
<h6 className="mb-2">
|
|
<a href="#">
|
|
<span>{ faker.commerce.productName() }</span>
|
|
<span className="text-muted ml-2">
|
|
#5.01
|
|
</span>
|
|
</a>
|
|
</h6>
|
|
<p className="card-text text-dark">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</span>
|
|
<div className="d-flex">
|
|
<div className="ml-auto">
|
|
<span className="mr-3">
|
|
<i className="fa-heart fa mr-1"></i> 34
|
|
</span>
|
|
<span className="mr-3">
|
|
<i className="fa-comment fa mr-1"></i> 8
|
|
</span>
|
|
</div>
|
|
<span>
|
|
16 Minutes Ago
|
|
</span>
|
|
</div>
|
|
</CardImgOverlay>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={ 4 }>
|
|
<Card>
|
|
<HolderProvider.Icon
|
|
iconChar=""
|
|
size={ 32 }
|
|
>
|
|
<CardImg />
|
|
</HolderProvider.Icon>
|
|
<CardImgOverlay className="d-flex align-content-between flex-wrap" style={{ height: '240px' }}>
|
|
<p className="card-text mt-0">
|
|
<span className="badge badge-primary">
|
|
Electronics
|
|
</span>
|
|
</p>
|
|
<span>
|
|
<h6 className="mb-2">
|
|
<a href="#">
|
|
<span>{ faker.commerce.productName() }</span>
|
|
<span className="text-muted ml-2">
|
|
#5.02
|
|
</span>
|
|
</a>
|
|
</h6>
|
|
<p className="card-text mb-3">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</span>
|
|
</CardImgOverlay>
|
|
<CardFooter className="d-flex">
|
|
<div>
|
|
<span className="mr-3">
|
|
<i className="fa-heart fa mr-1"></i> 34
|
|
</span>
|
|
<span className="mr-3">
|
|
<i className="fa-comment fa mr-1"></i> 8
|
|
</span>
|
|
</div>
|
|
<span className="ml-auto">
|
|
4 Minutes Ago
|
|
</span>
|
|
</CardFooter>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Section 5 */}
|
|
</Container>
|
|
);
|
|
|
|
export { Images };
|