Award Site card code

js

import React, { Component } from 'react';
import CardColumns from '@bit/react-bootstrap.react-bootstrap.card-columns';
import Card from '@bit/react-bootstrap.react-bootstrap.card';
import Button from '@bit/react-bootstrap.react-bootstrap.button';
import ReactBootstrapStyle from '@bit/react-bootstrap.react-bootstrap.internal.style-links';

class Example extends Component {
	render() {
		return (
			<div style={{width:900, marginTop: 20}}>
			<CardColumns>
				<Card>
					<Card.Img variant="top" src="https://picsum.photos/100/100" />
					<Card.Body>
						<Card.Title>Campaign Title</Card.Title>
						<Card.Text>
							Influencer Name
      			</Card.Text>
							<Button variant="primary">Visit</Button>
					</Card.Body>
							<Card.Footer>
								<small>Blog Post</small>
							</Card.Footer>
				</Card>
				<Card className="p-3">
					<blockquote className="blockquote mb-0 card-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
							erat a ante.
      </p>
						<footer className="blockquote-footer">
							<small className="text-muted">
								Someone famous in <cite title="Source Title">Source Title</cite>
							</small>
						</footer>
					</blockquote>
				</Card>
				<Card>
					<Card.Img variant="top" src="https://picsum.photos/100/100" />
					<Card.Body>
						<Card.Title>Card title</Card.Title>
						<Card.Text>
							This card has supporting text below as a natural lead-in to additional
        content.{' '}
						</Card.Text>
					</Card.Body>
					<Card.Footer>
						<small className="text-muted">Last updated 3 mins ago</small>
					</Card.Footer>
				</Card>
				<Card bg="primary" text="white" className="text-center p-3">
					<blockquote className="blockquote mb-0 card-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
							erat a ante.
      </p>
						<footer className="blockquote-footer">
							<small className="text-muted">
								Someone famous in <cite title="Source Title">Source Title</cite>
							</small>
						</footer>
					</blockquote>
				</Card>
				<Card className="text-center">
					<Card.Body>
						<Card.Title>Card title</Card.Title>
						<Card.Text>
							This card has supporting text below as a natural lead-in to additional
        content.{' '}
						</Card.Text>
						<Card.Text>
							<small className="text-muted">Last updated 3 mins ago</small>
						</Card.Text>
					</Card.Body>
				</Card>
				<Card>
					<Card.Img src="https://picsum.photos/100/100" />
				</Card>
				<Card className="text-right">
					<blockquote className="blockquote mb-0 card-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
							erat a ante.
      </p>
						<footer className="blockquote-footer">
							<small className="text-muted">
								Someone famous in <cite title="Source Title">Source Title</cite>
							</small>
						</footer>
					</blockquote>
				</Card>
				<Card>
					<Card.Body>
						<Card.Title>Card title</Card.Title>
						<Card.Text>
							This is a wider card with supporting text below as a natural lead-in to
							additional content. This card has even longer content than the first to
							show that equal height action.
      </Card.Text>
						<Card.Text>
							<small className="text-muted">Last updated 3 mins ago</small>
						</Card.Text>
					</Card.Body>
				</Card>
			</CardColumns>
			</div>
		)
	}
}

export default () => (<div><ReactBootstrapStyle /><Example /></div>)