Cards

Geek's cards provide a flexible and extensible content container with multiple variants and options.


Category

// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';
// import custom components
import CategoryCard from 'components/marketing/common/cards/CategoryCard';
export const CategoryCardTabContentExample = () => {
const data = [{
id: 1,
link: '#',
name: 'Engineering',
icon: '<svg class="bi bi-gear text-primary"fill="currentColor"height="24"viewBox="0 0 16 16"width="24"xmlns="http://www.w3.org/2000/svg"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/></svg>',
totalMentors: 21,
bgColor: 'primary'
}];
return (
<section className="py-6 bg-light">
<Container>
<Row>
<Col xxl={3} xl={4} lg={4} md={12}>
<CategoryCard category={data[0]} />
</Col>
</Row>
</Container>
</section>
)
}

Card Image Styled Webinar

webinar-1

Education Edition Deployment And Set Up

Thu, November 10, 2023
6:00 PM – 8:00 PM GMT
Register Now
// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import WebinarCard from 'components/marketing/common/cards/WebinarCard';
// import required media files
import WebinarImage from 'assets/images/education/edu-webinar-1.jpg';
export const WebinarImageStyledCardExample = () => {
const data = [
{
id: 1,
image: WebinarImage,
title: 'Education Edition Deployment And Set Up',
date: 'Thu, November 10, 2023',
time: '6:00 PM – 8:00 PM GMT',
link: "#"
}
]
return (
<section className="py-6 bg-light">
<Container>
<Row>
<Col xxl={4} xl={6} lg={12}>
<WebinarCard item={data[0]} />
</Col>
</Row>
</Container>
</section>
)
}

Card Top Image

// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';
// import custom components
import SkillCourseCard from 'components/marketing/common/cards/SkillCourseCard';
// import required media files
import EducationImg1 from 'assets/images/education/edu-img-1.jpg';
import EducationImg2 from 'assets/images/education/edu-img-2.jpg';
export const CardTopImageExample = () => {
const data = [
{
id: 1,
category: 'Writing',
image: EducationImg1,
duration: 8,
durationUnit: 'Hours',
title: 'Content Writing',
rating: 4.9,
votes: 31,
},
{
id: 2,
category: 'Design',
image: EducationImg2,
duration: 12,
durationUnit: 'Hours',
title: 'UI / UX Design',
rating: 4.9,
votes: 23
}];
return (
<section className="py-6 bg-light">
<Container>
<Row>
{data.map((item, index) => {
return (
<Col xl={3} md={6} xs={12} key={index}>
<SkillCourseCard item={item} />
</Col>
)
})}
</Row>
</Container>
</section>
)
}

Card icon with hover

Browse Category

Discover jobs across popular roles

Select a role and we'll show you relevant jobs for it!

Analtyics

2k Jobs

UI / UX Design

1k Jobs

Developer

800 Jobs

Product Manager

1.2K Jobs

SEO

1200 Jobs

Data Analytics

200 Jobs

Mobile Developer

120 Jobs

Finance

5k Jobs

// import node module libraries
import { Link } from 'react-router-dom';
import { Col, Container, Row } from 'react-bootstrap';
// import custom components
import StatTopSVGIcon from 'components/marketing/common/stats/StatTopSVGIcon';
import SectionHeadingCenter from 'components/marketing/common/section-headings/SectionHeadingCenter';
// import required data files
import JobCategoriesData from 'data/marketing/jobs/JobCategoriesData';
export const CardIconWithHover = () => {
const title = 'Discover jobs across popular roles';
const subtitle = 'Browse Category';
const description = 'Select a role and we'll show you relevant jobs for it!';
return (
<section className="py-8 bg-light">
<Container>
<SectionHeadingCenter
title={title}
description={description}
subtitle={subtitle}
/>
<Row className="gy-4">
{JobCategoriesData.map((item, index) => {
return (
<Col lg={3} md={4} xs={12} key={index}>
<StatTopSVGIcon item={item} />
</Col>
)
})}
<Col xs={12} className="mt-8 text-center">
<Link className="btn btn-outline-primary" to="#">View All Category</Link>
</Col>
</Row>
</Container>
</section>
)
}

Card Thumbnail V2

Intermediate

Revolutionize how you build the web

By: Jenny Wilson
2.5(16,500)
Beginner

HTML Full Course - Build a Website Tutorial

By: Miston Wilson
3.0(1,600)
// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import GetEnrolledCourseCard from "components/marketing/common/cards/GetEnrolledCourseCard";
// import required media files
import CourseGatsby from 'assets/images/course/course-gatsby.jpg';
import CourseReact from 'assets/images/course/course-react.jpg';
import CourseHTML from 'assets/images/course/course-html.jpg';
export const CardThumbnailV2Example = () => {
const data = [
{
id: 1,
image: CourseGatsby,
title: 'Revolutionize how you build the web',
instructor_name: 'Jenny Wilson',
level: 'Intermediate',
price: 850,
rating: 2.5,
ratingby: 16500,
link: '#'
},
{
id: 2,
image: CourseReact,
title: 'How to easily create a website with React',
instructor_name: 'April Noms',
level: 'Advance',
price: 750,
rating: 4.5,
ratingby: 1500,
link: '#'
},
{
id: 3,
image: CourseHTML,
title: 'HTML Full Course - Build a Website Tutorial',
instructor_name: 'Miston Wilson',
level: 'Beginner',
price: 700,
rating: 3.0,
ratingby: 1600,
link: '#'
}
]
return (
<section className="py-6 bg-light">
<Container>
<Row className="row-cols-1 row-cols-md-3 g-4">
{data.map((item, index) => (
<Col xs key={index}>
<GetEnrolledCourseCard item={item} />
</Col>
))}
</Row>
</Container>
</section>
)
}

Card 2 Column

Course Description

What will you learn?

Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful JavaScript applications.

Introduction to JavaScriptFree

Courses - 1 6 Lessons 1 HOUR 12 MIN

In et tempus dui, in porta dolor. Donec molestie a purus ut interdum. Donec quis felis dignissim, luctus libero ornare

View Chapter Details +

JavaScript Beginning

Courses - 2 4 Lessons 32 MIN

Malesuada fames ac turpis egesta mpor tempus tincidunt. Aliquam congue lacus ac tellus consectetur malesuada.

View Chapter Details +

Variables and Constants

Courses - 3 8 Lessons 10 MIN

Aliquam pulvinar eros a dictur vitae diam imperdiet, ornare turpis vequet elit nec, imperdiet lectuna liquam qs.

View Chapter Details +

Types and Operators

Courses - 4 10 Lessons 32 MIN

In lobortis quam eu augue spendisse imperdiet nec orci ipsum, tempus pharetra posuere imperdiet, lacinia a nisl.

View Chapter Details +
// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import CourseDescriptionCard from 'components/marketing/common/cards/CourseDescriptionCard';
import SectionHeadingCenter from "components/marketing/common/section-headings/SectionHeadingCenter";
// import requried data files
import { CourseDescriptionList } from "data/marketing/LeadCourseData";
export const Card2ColumnExample = () => {
return (
<section className="py-8 bg-light">
<Container>
<SectionHeadingCenter
title='What will you learn?'
subtitle='Course Description'
description='Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful JavaScript applications.'
/>
<Row>
{CourseDescriptionList.map((item) => (
<Col lg={6} sm={12} key={item.id}>
<CourseDescriptionCard item={item} />
</Col>
))}
</Row>
</Container>
</section>
)
}

Card with Icon

Make Education Accessible

Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.

Learn and Grow

Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.

Make Education Accessible

Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.

// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
import { GraphUpArrow, Mortarboard, PeopleFill } from "react-bootstrap-icons";
// import custom components
import FeatureTopIconCard from "components/marketing/common/features/FeatureTopIconCard";
export const CardWithIconExample = () => {
const data = [
{
id: 1,
icon: <Mortarboard className="text-primary" size={40} />,
title: 'Make Education Accessible',
description: 'Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.'
},
{
id: 2,
icon: <PeopleFill className="text-primary" size={40} />,
title: 'Learn and Grow',
description: 'Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.'
},
{
id: 3,
icon: <GraphUpArrow className="text-primary" size={40} />,
title: 'Make Education Accessible',
description: 'Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.'
}
];
return (
<section className="py-10 bg-light">
<Container>
<Row>
{data.map((item, index) => {
return (
<Col md={4} sm={12} key={index}>
<FeatureTopIconCard item={item} />
</Col>
);
})}
</Row>
</Container>
</section>
);
}

List Groups Card

// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import GKAccordionProgress from 'components/marketing/common/accordions/GKAccordionProgress';
// import data files
import { CourseIndex } from "data/marketing/CourseIndexData";
export const ListGroupsCardExample = () => {
return (
<section className="py-8 bg-light">
<Container>
<Row>
<Col lg={4} sm={12} >
<GKAccordionProgress accordionItems={CourseIndex} />
</Col>
</Row>
</Container>
</section>
)
}

Profile Card

Jenny Wilson

Front-end Developer, Designer

4.5 Instructor Rating

42 Courses110,124 Students

I start my development and digital career studying digital design. After taking a couple of programming classes I realize that code is what I wanted to be doing.

View Details
// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import ProfileCard from "components/marketing/common/cards/ProfileCard";
// import required media files
import Avatar1 from 'assets/images/avatar/avatar-1.jpg';
export const ProfileCardExample= () => {
const data = [
{
id: 1,
author_name: 'Jenny Wilson',
author_image: Avatar1,
designation: 'Front-end Developer, Designer',
rating: 4.5,
students: 110124,
courses: 42,
about_author: 'I start my development and digital career studying digital design. After taking a couple of programming classes I realize that code is what I wanted to be doing.'
},
]
return (
<section className="py-6 bg-light">
<Container>
<Row>
<Col xxl={6} xl={6} lg={12}>
<ProfileCard item={data[0]} />
</Col>
</Row>
</Container>
</section>
)
}

Course Path Card

Bootstrap

42 Courses110124 Hours

// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import CoursePathCard from "components/marketing/common/cards/CoursePathCard";
// import required media files
import PathBootstrap from 'assets/images/path/path-bootstrap.svg';
export const CoursePathCardExample = () => {
const data = [
{
id: 1,
category: 'Development',
logo: PathBootstrap,
title: 'Bootstrap',
courses: 42,
hours: 110124,
link: '#'
}
]
return (
<section className="py-6 bg-light">
<Container>
<Row>
<Col xxl={4} xl={6} lg={12}>
<CoursePathCard item={data[0]} />
</Col>
</Row>
</Container>
</section>
)
}

Card Course Horizontal

Revolutionize how you build the web

  • 1h 46m
  • Intermediate
  • 2.0 (16,500)
Jenny Wilson
// import node module libraries
import { Container } from "react-bootstrap";
// import custom components
import CourseCard from "components/marketing/common/cards/CourseCard";
// import required media files
import CourseGatsby from 'assets/images/course/course-gatsby.jpg';
import Avatar7 from 'assets/images/avatar/avatar-7.jpg';
export const CardCourseHorizontalExample = () => {
const data = [
{
id: 1,
image: CourseGatsby,
title: 'Revolutionize how you build the web',
instructor_name: 'Jenny Wilson',
instructor_image: Avatar7,
level: 'Intermediate',
duration: '1h 46m',
rating: 2.0,
ratingby: 16500,
link: '#'
}
]
return (
<section className="py-6 bg-light">
<Container>
<CourseCard item={data[0]} viewby="list" />
</Container>
</section>
)
}

Card Course Thumbnail

Revolutionize how you build the web

  • 1h 46m
  • Intermediate
2.0 (16,500)
$NaN $
// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import CourseCard from "components/marketing/common/cards/CourseCard";
// import required media files
import CourseGatsby from 'assets/images/course/course-gatsby.jpg';
import Avatar7 from 'assets/images/avatar/avatar-7.jpg';
export const CardCourseThumbnailExample = () => {
const data = [
{
id: 1,
image: CourseGatsby,
title: 'Revolutionize how you build the web',
instructor_name: 'Jenny Wilson',
instructor_image: Avatar7,
level: 'Intermediate',
duration: '1h 46m',
rating: 2.0,
ratingby: 16500,
link: '#'
}
]
return (
<section className="py-6 bg-light">
<Container>
<Row>
<Col xxl={4} xl={6} lg={12}>
<CourseCard item={data[0]} viewby="grid" />
</Col>
</Row>
</Container>
</section>
)
}

Card Thumbnail

Courses

Getting started the Web App JavaScript in 2020

Debitis ipsam ratione molestias dolores qui asperiores consequatur facilis error.

Dustin Warren

September 13, 2020

6 Min Read

// import node module libraries
import { Col, Container, Row } from "react-bootstrap";
// import custom components
import BlogCard from "components/marketing/common/cards/BlogCard";
// import required media files
import BlogPost2 from 'assets/images/blog/blogpost-2.jpg';
import Avatar6 from 'assets/images/avatar/avatar-6.jpg';
export const CardThumbnailExample = () => {
const data = [
{
id: 1,
blogpostimage: BlogPost2,
category: 'Courses',
title: 'Getting started the Web App JavaScript in 2020',
slug: 'getting-started-the-web-app-javascript-in-2020',
details: 'Debitis ipsam ratione molestias dolores qui asperiores consequatur facilis error.',
authorname: 'Dustin Warren',
authorimage: Avatar6,
postedon: 'September 13, 2020',
readinglength: 6
}
];
return (
<section className="py-6 bg-light">
<Container>
<Row>
<Col xxl={4} xl={6} lg={12}>
<BlogCard item={data[0]} />
</Col>
</Row>
</Container>
</section>
)
}

Horizontal Card with Image

Courses

Getting started the Web App JavaScript in 2020

Debitis ipsam ratione molestias dolores qui asperiores consequatur facilis error.

September 13, 2020

6 Min Read

// import node module libraries
import { Container } from "react-bootstrap";
// import custom components
import BlogCardFullWidth from "components/marketing/common/cards/BlogCardFullWidth";
// import required media files
import BlogPost2 from 'assets/images/blog/blogpost-2.jpg';
import Avatar6 from 'assets/images/avatar/avatar-6.jpg';
export const HorizontalCardWithImageExample = () => {
const data = [
{
id: 1,
blogpostimage: BlogPost2,
category: 'Courses',
title: 'Getting started the Web App JavaScript in 2020',
slug: 'getting-started-the-web-app-javascript-in-2020',
details: 'Debitis ipsam ratione molestias dolores qui asperiores consequatur facilis error.',
authorname: 'Dustin Warren',
authorimage: Avatar6,
postedon: 'September 13, 2020',
readinglength: 6
}
];
return (
<section className="py-6 bg-light">
<Container>
<BlogCardFullWidth item={data[0]} />
</Container>
</section>
)
}
Buy Now