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

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

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

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

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

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

...

Gucci Shorts

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

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

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

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

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.