@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
131 lines (129 loc) • 7.4 kB
JavaScript
import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap';
export const StepsTwoColumns = () => {
return (
<>
<Row className="g-0">
<Col className="mb-2 justify-content-end align-items-center text-semi-large text-muted d-none d-md-flex">19.11.2020</Col>
<Col xs="auto" className="sw-7 d-flex flex-column justify-content-center align-items-center position-relative me-4 ms-0 ms-md-4">
<div className="w-100 d-flex h-100" />
<div className="bg-foreground sw-7 sh-7 rounded-lg shadow d-flex flex-shrink-0 justify-content-center align-items-center mt-n2 position-relative">
<div className="bg-gradient-light sw-5 sh-5 rounded-md">
<div className="text-white d-flex justify-content-center align-items-center h-100">01</div>
</div>
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
</Col>
<Col className="mb-2">
<Card className="h-100">
<Card.Body className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 heading text-start stretched-link">
Wafer Topping Bonbon Cotton Candy
</Button>
<div className="text-alternate d-md-none mb-2">19.11.2020</div>
<div className="text-muted">
Wafer topping bonbon cotton candy sesame snaps. Jelly beans gummi bears cheesecake. Jelly-o wafer sesame snaps candy canes. Danish dragée
toffee bonbon. Jelly-o marshmallow cake oat cake caramels jujubes. Jujubes tiramisu ice cream.
</div>
</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row className="g-0">
<Col className="justify-content-start align-items-center text-semi-large text-muted d-none d-md-flex order-md-3">20.11.2020</Col>
<Col xs="auto" className="sw-7 d-flex flex-column justify-content-center align-items-center position-relative me-4 ms-0 ms-md-4 order-md-2">
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
<div className="bg-foreground sw-7 sh-7 rounded-lg shadow d-flex flex-shrink-0 justify-content-center align-items-center mt-n2 position-relative">
<div className="bg-gradient-light sw-5 sh-5 rounded-md">
<div className="text-white d-flex justify-content-center align-items-center h-100">02</div>
</div>
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
</Col>
<Col className="mb-2 order-md-1">
<Card className="h-100">
<Card.Body className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 heading text-start text-md-end stretched-link">
Tart Powder Sweet Roll Toffee
</Button>
<div className="text-alternate d-md-none mb-2">20.11.2020</div>
<div className="text-muted">Cheesecake chocolate carrot cake pie lollipop lemon drops toffee lollipop.</div>
</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row className="g-0">
<Col className="mb-2 justify-content-end align-items-center text-semi-large text-muted d-none d-md-flex">24.11.2020</Col>
<Col xs="auto" className="sw-7 d-flex flex-column justify-content-center align-items-center position-relative me-4 ms-0 ms-md-4">
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
<div className="bg-foreground sw-7 sh-7 rounded-lg shadow d-flex flex-shrink-0 justify-content-center align-items-center mt-n2 position-relative">
<div className="bg-gradient-light sw-5 sh-5 rounded-md">
<div className="text-white d-flex justify-content-center align-items-center h-100">03</div>
</div>
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
</Col>
<Col className="mb-2">
<Card className="h-100">
<Card.Body className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 heading text-start stretched-link">
Powder Sesame Snaps Cupcake
</Button>
<div className="text-alternate d-md-none mb-2">24.11.2020</div>
<div className="text-muted">
Wafer topping bonbon cotton candy sesame snaps. Jelly beans gummi bears cheesecake. Jelly-o wafer sesame snaps candy canes. Danish dragée
toffee bonbon. Jelly-o marshmallow cake oat cake caramels jujubes. Jujubes tiramisu ice cream.
</div>
</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row className="g-0">
<Col className="justify-content-start align-items-center text-semi-large text-muted d-none d-md-flex order-md-3">25.11.2020</Col>
<Col xs="auto" className="sw-7 d-flex flex-column justify-content-center align-items-center position-relative me-4 ms-0 ms-md-4 order-md-2">
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
<div className="bg-foreground sw-7 sh-7 rounded-lg shadow d-flex flex-shrink-0 justify-content-center align-items-center mt-n2 position-relative">
<div className="bg-gradient-light sw-5 sh-5 rounded-md">
<div className="text-white d-flex justify-content-center align-items-center h-100">04</div>
</div>
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative" />
</Col>
<Col className="mb-2 order-md-1">
<Card className="h-100">
<Card.Body className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 heading text-start text-md-end stretched-link">
Dough for the Molds
</Button>
<div className="text-alternate d-md-none mb-2">25.11.2020</div>
<div className="text-muted">
Lemon drops brownie topping bear claw chocolate bar tootsie roll cake macaroon icing. Oat cake gingerbread cake. Tart powder sweet roll toffee
chocolate bar. Bonbon sugar plum wafer.
</div>
</div>
</Card.Body>
</Card>
</Col>
</Row>
</>
);
};