Tomasz Owczarczyk
878
app/routes/Interface/Images/Images.js
Executable file
878
app/routes/Interface/Images/Images.js
Executable file
@@ -0,0 +1,878 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
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 };
|
||||
3
app/routes/Interface/Images/index.js
Executable file
3
app/routes/Interface/Images/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { Images } from './Images';
|
||||
|
||||
export default Images;
|
||||
Reference in New Issue
Block a user