Reactstrap Core Cards

-
Pro Component

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

Focus

Our brains are finely attuned to distraction

... 
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...

...Johana Doe
10.4K · 425 
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

...
Card Title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago 

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...

...Johana Doe
10.4K · 425 
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

...Dylan Wyatt
10.4K · 425 
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

...
Get started with Argon
by John Snow on Oct 29th at 10:23 AM

Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.

View article 
import 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 more 
import 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 more 
import 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 more 
import 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

New Challenges
Touch on a trend
 
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

New Opportunities
Constantly growing
 
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

Login with
...Github...Google
Or login with credentials 
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
$49
per application
  • Complete documentation
  • Working materials in Sketch
  • 2GB cloud storage
Request a demo 
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
$89
per month
  • 20GBFile Storage
  • SketchWorking materials in
  • PremiumSupport
Request a demo 
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

Standard

$69

  • Sharing Tools
  • Design Tools
  • Private Messages
  • Private Brand
Choose plan 
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

Premium

$109

  • 100Projects
  • 5Team Members
  • 55Personal Contacts
  • 5KMessages
Get Started 
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

$89/mo

  • 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

NEW...
Ralph Lauren
€ 300 
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

...
Tom Ford
€ 1179€ 999 
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

...
Wooyoungmi
€ 555 
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

...
Thom Sweeney
€ 680 
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

...

Winter Hat
€ 99 
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

...

Gucci Shorts
€ 879€ 499 
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

...

Ice Bracelet
€ 19,999 
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

...

Necklace
€ 229 
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

Dolce & Gabbana's 'Greta' tote has been crafted in Italy from hard-wearing red textured-leather.
€1,459 
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

Balmain's mid-rise skinny jeans are cut with stretch to ensure they retain their second-skin fit but move comfortably.
€459 
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

Balenciaga's black textured-leather wallet is finished with the label's iconic 'Giant' studs. This is where you can...
€559 
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

Dolce & Gabbana's 'Greta' tote has been crafted in Italy from hard-wearing red textured-leather.
€ 1,359 
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

...

Dylan Wyatt

Team Lead

  • Dedicated entrepreneur
  • Urban exploration
  • Able to get good at everything 
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

...
ConnectMessage
22Friends
10Photos
89Comments
Daisy Paisley, 28
Bucharest, Romania 
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

...
Austin Johnson
Project Manager

Don't be scared of the truth because we need to restart the human foundation in truth And I love you... 

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...

Follow 
import 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

...
...
Johana Doe, 37
Chicago, USA
23KFollowers
47Posts 
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

...

Jane Doe

Team Lead

Skills Leadership
Hobbies Skiing, Chess
Level • • • • • 
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

...
ConnectMessage
22Friends
10Photos
89Comments

Jessica Jones, 27

Bucharest, Romania
Solution Manager - Creative Tim Officer
University of Computer Science

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 more 
import 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

Enter email address to 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.