Reactstrap Core Cards
-Reactstrap’s and Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Description
We’ve made the following cards components using various
reactstrap
components, and
Bootstrap
classes and also some custom
scss
/css
classes.
Examples
Blog Cards
BlogCard1
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard1 from "components/cards/BlogCard1.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard1 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard2

Focus
Stay focused
Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard2 from "components/cards/BlogCard2.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard2 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard3
Features
FiftyThree Files For Paper
Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard3 from "components/cards/BlogCard3.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard3 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard4
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard4 from "components/cards/BlogCard4.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard4 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard5
Business
Springer Spends $343M To Buy Business Insider
German media giant Axel Springer has announced it’s acquiring online business news publication Business Inside...
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard5 from "components/cards/BlogCard5.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard5 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard6
Features
That’s One Way To Ditch Your Passenger
As near as we can tell, this guy must have thought he was going over backwards break to bring the nose down...
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard6 from "components/cards/BlogCard6.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard6 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard7
Here Be Dragons
Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard7 from "components/cards/BlogCard7.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard7 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard8
News
Focus on Your Employees
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard8 from "components/cards/BlogCard8.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard8 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard9
Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.
View articleimport React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard9 from "components/cards/BlogCard9.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard9 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard10
Bussiness
Society has put up so many boundaries and limitations on what’s right and wrong that it’s almost impossible...
Read moreimport React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard10 from "components/cards/BlogCard10.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard10 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard11

Premium
Colors are good, before somebody tells you you shouldn’t like pink because that’s for girls.
Read moreimport React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard11 from "components/cards/BlogCard11.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard11 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard12
Focus
Because it's about motivating the doers. Because I’m here to follow my dreams and inspire other people.
Read moreimport React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard12 from "components/cards/BlogCard12.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard12 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard13

Wearing
Choose the best products
Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard13 from "components/cards/BlogCard13.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard13 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard14
Fashion
Wardrobe essentials
Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard14 from "components/cards/BlogCard14.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard14 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
BlogCard15
Fashion
Wardrobe essentials
Trends may come and go, but wardrobe essentials are here to stay. Basic pieces tend to be universal across.
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import BlogCard15 from "components/cards/BlogCard15.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<BlogCard15 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
Full Background Cards
FullBackgroundCard1
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import FullBackgroundCard1 from "components/cards/FullBackgroundCard1.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<FullBackgroundCard1 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
FullBackgroundCard2
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import FullBackgroundCard2 from "components/cards/FullBackgroundCard2.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<FullBackgroundCard2 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
FullBackgroundCard3
Sales Leads
Configure Blockchain Technology
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import FullBackgroundCard3 from "components/cards/FullBackgroundCard3.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<FullBackgroundCard3 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
Login Cards
LoginCard1
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import LoginCard1 from "components/cards/LoginCard1.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<LoginCard1 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
Pricing Cards
PricingCard1
Bravo pack
-
Complete documentation
-
Working materials in Sketch
-
2GB cloud storage
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import PricingCard1 from "components/cards/PricingCard1.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<PricingCard1 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
PricingCard2
Premium pack
- 20GBFile Storage
- SketchWorking materials in
- PremiumSupport
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import PricingCard2 from "components/cards/PricingCard2.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<PricingCard2 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
PricingCard3
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import PricingCard3 from "components/cards/PricingCard3.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<PricingCard3 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
PricingCard4
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import PricingCard4 from "components/cards/PricingCard4.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<PricingCard4 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
PricingCard5
Platinum Pack
£ 349- 350 messages
- 10K emails
- 24/7 Support
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import PricingCard5 from "components/cards/PricingCard5.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<PricingCard5 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
PricingCard6
Premium pack
-
10 Templates + Updates
-
+ Adobe Sketch
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import PricingCard6 from "components/cards/PricingCard6.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<PricingCard6 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
Product Cards
ProductCard1
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard1 from "components/cards/ProductCard1.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard1 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard2
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard2 from "components/cards/ProductCard2.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard2 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard3
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard3 from "components/cards/ProductCard3.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard3 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard4
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard4 from "components/cards/ProductCard4.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard4 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard5
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard5 from "components/cards/ProductCard5.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard5 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard6
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard6 from "components/cards/ProductCard6.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard6 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard7
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard7 from "components/cards/ProductCard7.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard7 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard8
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard8 from "components/cards/ProductCard8.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard8 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard9
Trending
Gucci
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard9 from "components/cards/ProductCard9.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard9 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard10
Popular
Balmain
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard10 from "components/cards/ProductCard10.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard10 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard11
Popular
Balenciaga
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard11 from "components/cards/ProductCard11.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard11 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProductCard12
Trending
D & G
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProductCard12 from "components/cards/ProductCard12.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProductCard12 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProfileCards
ProfileCard1
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProfileCard1 from "components/cards/ProfileCard1.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProfileCard1 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProfileCard2
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProfileCard2 from "components/cards/ProfileCard2.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProfileCard2 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProfileCard3
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProfileCard3 from "components/cards/ProfileCard3.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProfileCard3 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProfileCard4
Project Manager
Austin Johnson
Don't be scared of the truth because we need to restart the human foundation in truth And I love you...
Followimport React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProfileCard4 from "components/cards/ProfileCard4.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProfileCard4 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProfileCard5
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProfileCard5 from "components/cards/ProfileCard5.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProfileCard5 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProfileCard6
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProfileCard6 from "components/cards/ProfileCard6.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProfileCard6 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
ProfileCard7
Jessica Jones, 27
An artist of considerable range, Ryan — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. An artist of considerable range.
Show moreimport React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ProfileCard7 from "components/cards/ProfileCard7.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ProfileCard7 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
Reset Cards
ResetCard1
Reset Password
import React from "react";
// reactstrap components
import {
Container, Row, Col
} from "reactstrap";
// Core Components
import ResetCard1 from "components/cards/ResetCard1.js";
function Example() {
return (
<>
<Container>
<Row>
<Col lg="3" md="6">
<ResetCard1 />
</Col>
</Row>
</Container>
</>
);
}
export default Example;
Note
You should note, that none of the bellow components are dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.