reactstrap#CardGroup JavaScript Examples
The following examples show how to use
reactstrap#CardGroup.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: import React, { Component } from 'react'.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="8">
<CardGroup>
<Card className="p-4">
<CardBody>
<Form>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" required onChange={this.handleUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<font color="red">{this.state.messageErrorUsername}</font>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" onChange={this.handlePassword} placeholder="Password" autoComplete="current-password" />
</InputGroup>
<font color="red">{this.state.messageErrorPassword}</font>
<Row>
<Col xs="6">
<Button color="primary" className="px-4" onClick={this.onHandleSubmit}>Login</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<Card className="text-white py-5 d-md-down-none" style={{ width: '44%', backgroundColor: '#1A446D' }}>
<CardBody className="text-center">
<div>
<img src={Logo} className="img-fluid" />
<h4 style={{marginTop: 20, fontFamily:'D-Din'}}>moonlay<b>technologies</b></h4>
</div>
</CardBody>
</Card>
</CardGroup>
</Col>
</Row>
</Container>
</div>
);
}
Example #2
| Source File: Login.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="8">
<CardGroup>
<Card className="p-4">
<CardBody>
<Form>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" required onChange={this.handleUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<font color="red">{this.state.messageErrorUsername}</font>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" onChange={this.handlePassword} placeholder="Password" autoComplete="current-password" />
</InputGroup>
<font color="red">{this.state.messageErrorPassword}</font>
<Row>
<Col xs="6">
<Button color="primary" className="px-4" onClick={this.onHandleSubmit}>Login</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<Card body className="justify-content-center" style={{ width: '44%', backgroundColor: '#1A446D', }}>
<CardImg src={Logo} alt="Logo" style={{padding:'auto'}} />
</Card>
</CardGroup>
</Col>
</Row>
</Container>
</div>
);
}
Example #3
| Source File: Widgets.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6" lg="3">
<Widget01 color="success" header="89.9%" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget01 color="info" header="12.124" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget01 color="warning" header="$98.111,00" smallText="">
<small className="text-muted">Excepteur sint occaecat...</small>
</Widget01>
</Col>
<Col xs="12" sm="6" lg="3">
<Widget01 color="danger" value="95" header="1.9 TB" mainText="Danger!"
smallText="This is your final warning..." />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget01 color="primary" variant="inverse" header="89.9%" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget01 color="warning" variant="inverse" header="12.124" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget01 color="danger" variant="inverse" header="$98.111,00" smallText="">
<small className="text-muted">Excepteur sint occaecat...</small>
</Widget01>
</Col>
<Col xs="12" sm="6" lg="3">
<Widget01 color="info" variant="inverse" value="95" header="1.9 TB" mainText="Danger!"
smallText="This is your final warning..." />
</Col>
</Row>
<Row>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" footer link="#/charts" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" footer />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" footer />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" footer />
</Col>
</Row>
<Row>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="1" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="1" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="1" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="1" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="2" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="2" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="2" />
</Col>
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="2" />
</Col>
</Row>
<Row>
<Col xs={12} sm={6} md={3}>
<Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Col>
<Col xs={12} sm={6} md={3}>
<Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Col>
<Col xs={12} sm={6} md={3}>
<Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Col>
<Col xs={12} sm={6} md={3}>
<Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Col>
</Row>
<CardGroup className="mb-4">
<Widget04 icon="icon-people" color="info" header="87.500" value="25">Visitors</Widget04>
<Widget04 icon="icon-user-follow" color="success" header="385" value="25">New Clients</Widget04>
<Widget04 icon="icon-basket-loaded" color="warning" header="1238" value="25">Products sold</Widget04>
<Widget04 icon="icon-pie-chart" color="primary" header="28%" value="25">Returning Visitors</Widget04>
<Widget04 icon="icon-speedometer" color="danger" header="5:34:11" value="25">Avg. Time</Widget04>
</CardGroup>
<Row>
<Col sm="6" md="2">
<Widget04 icon="icon-people" color="info" header="87.500" value="25">Visitors</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-user-follow" color="success" header="385" value="25">New Clients</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-basket-loaded" color="warning" header="1238" value="25">Products sold</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-pie-chart" color="primary" header="28%" value="25">Returning Visitors</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-speedometer" color="danger" header="5:34:11" value="25">Avg. Time</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-speech" color="info" header="972" value="25">Comments</Widget04>
</Col>
</Row>
<Row>
<Col sm="6" md="2">
<Widget04 icon="icon-people" color="info" header="87.500" value="25" invert>Visitors</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-user-follow" color="success" header="385" value="25" invert>New Clients</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-basket-loaded" color="warning" header="1238" value="25" invert>Products sold</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-pie-chart" color="primary" header="28%" value="25" invert>Returning Visitors</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-speedometer" color="danger" header="5:34:11" value="25" invert>Avg. Time</Widget04>
</Col>
<Col sm="6" md="2">
<Widget04 icon="icon-speech" color="info" header="972" value="25" invert>Comments</Widget04>
</Col>
</Row>
</div>
);
}
