Skip to main content

Card

Example

Card

import React, { useState } from "react";
import {
Container,
Row,
Col,
Form,
FormGroup,
Label,
Input,
Button,
Select,
} from "slipstream-ui";
export function CardView() {
const [state, setState] = useState({
email: "",
password: "",
});
function _handleChange(e) {
setState({ ...state, [e.target.name]: e.target.value });
}
function _handleSubmit(e) {
e.preventDefault();
}
return (
<Container size="md">
<Row>
<Row>
<Col>
<h1 className="mb-4">Card</h1>
<Form
onSubmit={(e) => {
e.preventDefault();
alert("Form submitted!");
}}
>
<Row>
<Col>
<FormGroup>
<Label htmlFor="form-card_name">Card Holder</Label>
<Input
id="form-card_name"
type="text"
name="card-name"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col>
<FormGroup>
<Label htmlFor="form-card_number">Card Number</Label>
<Input
id="form-card_number"
type="text"
name="card-number"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col sm="1/2">
<FormGroup>
<Label htmlFor="form-card_exp--month">Month</Label>
<Select
id="form-card_exp--month"
name="card-month"
className="leading-none"
>
<Select.Option value="january">January</Select.Option>
<Select.Option value="february">February</Select.Option>
<Select.Option value="march">March</Select.Option>
<Select.Option value="april">April</Select.Option>
<Select.Option value="may">May</Select.Option>
<Select.Option value="june">June</Select.Option>
<Select.Option value="july">July</Select.Option>
<Select.Option value="august">August</Select.Option>
<Select.Option value="september">September</Select.Option>
<Select.Option value="october">October</Select.Option>
<Select.Option value="november">November</Select.Option>
<Select.Option value="december">December</Select.Option>
</Select>
</FormGroup>
</Col>
<Col sm="1/2">
<FormGroup>
<Label htmlFor="form-card_exp--year">Year</Label>
<Select id="form-card_exp--year" name="card-year">
<Select.Option value="2016">2016</Select.Option>
<Select.Option value="2017">2017</Select.Option>
<Select.Option value="2018">2018</Select.Option>
<Select.Option value="2019">2019</Select.Option>
<Select.Option value="2020">2020</Select.Option>
<Select.Option value="2021">2021</Select.Option>
<Select.Option value="2022">2022</Select.Option>
<Select.Option value="2023">2023</Select.Option>
<Select.Option value="2024">2024</Select.Option>
</Select>
</FormGroup>
</Col>
<Col sm="1/2">
<FormGroup>
<Label htmlFor="form-card_cvv">CVC/CVV</Label>
<Input id="form-card_cvv" name="card-cvv" type="text"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col>
<FormGroup>
<Button type="submit" block>
Submit
</Button>
</FormGroup>
</Col>
</Row>
</Form>
</Col>
</Row>
</Container>
);
}
export default CardView;