Cards
Geek's cards provide a flexible and extensible content container with multiple variants and options.
Category
// import node module librariesimport { Col, Container, Row } from 'react-bootstrap';// import custom componentsimport 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
// import node module librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport WebinarCard from 'components/marketing/common/cards/WebinarCard';// import required media filesimport 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 librariesimport { Col, Container, Row } from 'react-bootstrap';// import custom componentsimport SkillCourseCard from 'components/marketing/common/cards/SkillCourseCard';// import required media filesimport 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
Discover jobs across popular roles
Select a role and we'll show you relevant jobs for it!
// import node module librariesimport { Link } from 'react-router-dom';import { Col, Container, Row } from 'react-bootstrap';// import custom componentsimport StatTopSVGIcon from 'components/marketing/common/stats/StatTopSVGIcon';import SectionHeadingCenter from 'components/marketing/common/section-headings/SectionHeadingCenter';// import required data filesimport 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><SectionHeadingCentertitle={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
// import node module librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport GetEnrolledCourseCard from "components/marketing/common/cards/GetEnrolledCourseCard";// import required media filesimport 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
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 librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport CourseDescriptionCard from 'components/marketing/common/cards/CourseDescriptionCard';import SectionHeadingCenter from "components/marketing/common/section-headings/SectionHeadingCenter";// import requried data filesimport { CourseDescriptionList } from "data/marketing/LeadCourseData";export const Card2ColumnExample = () => {return (<section className="py-8 bg-light"><Container><SectionHeadingCentertitle='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 librariesimport { Col, Container, Row } from "react-bootstrap";import { GraphUpArrow, Mortarboard, PeopleFill } from "react-bootstrap-icons";// import custom componentsimport 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
- Introduction to JavaScript
4 videos (1 hour and 17 minutes)
- JavaScript Beginning
8 videos (34 minutes)
- Variables and Constants
10 videos (3 hour and 24 minutes)
- Program Flow
11 videos (2 hour and 10 minutes)
- Functions
8 videos (4 hour and 38 minutes)
- Objects and the DOM
10 videos (2 hour and 10 minutes)
- Arrays
8 videos (1 hour and 5 minutes)
- Scope and Hoisting
7 videos (3 hour and 15 minutes)
- Summary
1 videos (5 minutes)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae esse velit eos sunt ab inventore est tenetur blanditiis? Voluptas eius molestiae ad itaque tempora nobis minima eveniet aperiam molestias, maiores natus expedita dolores ea non possimus magnam corrupt i quas rem unde quo enim porro culpa! Quaerat veritatis veniam corrupti iusto.
// import node module librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport GKAccordionProgress from 'components/marketing/common/accordions/GKAccordionProgress';// import data filesimport { 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 librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport ProfileCard from "components/marketing/common/cards/ProfileCard";// import required media filesimport 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 librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport CoursePathCard from "components/marketing/common/cards/CoursePathCard";// import required media filesimport 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
// import node module librariesimport { Container } from "react-bootstrap";// import custom componentsimport CourseCard from "components/marketing/common/cards/CourseCard";// import required media filesimport 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
// import node module librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport CourseCard from "components/marketing/common/cards/CourseCard";// import required media filesimport 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
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 librariesimport { Col, Container, Row } from "react-bootstrap";// import custom componentsimport BlogCard from "components/marketing/common/cards/BlogCard";// import required media filesimport 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
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 librariesimport { Container } from "react-bootstrap";// import custom componentsimport BlogCardFullWidth from "components/marketing/common/cards/BlogCardFullWidth";// import required media filesimport 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>)}