{"componentChunkName":"component---src-templates-javascriptdocs-js","path":"/docs/contrast/javascript/components/card","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"c0b86fbb-a562-5d76-bfbe-fddc0a8827ae","title":"Card","slug":"/contrast/javascript/components/card"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"p\", null, \"title: \\\"Card\\\"\\nmetaTitle: \\\"Card Component for Contrast Bootstrap \\\"\"), mdx(\"h2\", null, \"metaDescription: \\\"Bootstrap Card is responsive and interactive slideshow which is created for presenting content, especially images and videos\\\"\"), mdx(\"h1\", null, \"Card\"), mdx(\"p\", null, \"Bootstrap Card is responsive and interactive slideshow which is created for presenting content, especially images and videos.\"), mdx(\"p\", null, \"The Card is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.\"), mdx(\"h2\", null, \"Basic Cards\"), mdx(\"p\", null, \"Default Card example.\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n \\n
\\n
Basic
\\n
\\n This is just a card text Get important notifications about you\\n or activity you've missed\\n
\\n
\\n \\n
\\n
\\n
\\n\")), mdx(\"h2\", null, \"Widget Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n
Total Downloads
\\n

1,057,891

\\n

\\n Oct 1 - Dec 31, Worldwide\\n

\\n
\\n
\\n\")), mdx(\"h2\", null, \"Counter Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n \\n
Customers
\\n

852k

\\n

\\n Oct 1 - Dec 31, Worldwide\\n

\\n

\\n 27.4%\\n Since last quarter\\n

\\n
\\n
\\n\")), mdx(\"h2\", null, \"Rating Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n

Average Rating

\\n

4.2

\\n
\\n \\n ★Abysmal\\n ★Bad\\n ★Ok\\n ★Good\\n ★Excellent\\n
\\n
\\n

Based on 231,156 ratings

\\n
\\n
\\n
\\n 5\\n \\n
\\n\\n
\\n \\n
\\n
\\n
\\n
\\n\\n
\\n
\\n 4\\n \\n
\\n\\n
\\n \\n
\\n
\\n
\\n
\\n
\\n
\\n 3\\n \\n
\\n\\n
\\n \\n
\\n
\\n
\\n \\n
\\n
\\n 2\\n \\n
\\n\\n
\\n \\n
\\n
\\n
\\n \\n
\\n
\\n 1\\n \\n
\\n\\n
\\n \\n
\\n
\\n
\\n \\n \\n \\n\")), mdx(\"h2\", null, \"Event List Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n \\n Events\\n \\n
\\n \\n
\\n

\\n Newmarket Nights\\n

\\n

Organized by University of Oxford

\\n

Time: 6:00AM

\\n

\\n Place: Cambridge Boat Club, Cambridge\\n

\\n
\\n
\\n
\\n \\n
\\n

\\n Noco Hemp Expo\\n

\\n

Organized by University of Oxford

\\n

\\n Thu, 12 Sep - Sat, 18 Sep 2020\\n

\\n

\\n Place: Denver Expo Club, USA\\n

\\n
\\n
\\n
\\n \\n
\\n

\\n Canadian National Exhibition (CNE)\\n

\\n

Organized by University of Oxford

\\n

\\n Fri, 20 Sep - Mon, 07 Oct 2020\\n

\\n

\\n Place: Toronto , Canada\\n

\\n
\\n
\\n

See All

\\n
\\n \\n\")), mdx(\"h2\", null, \"Invoice List Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n
\\n
\\n

Order History

\\n

\\n Manage billing information and view receipts\\n

\\n
\\n
\\n
\\n
\\n

Invoice #120345

\\n

Billed August 21, 2019

\\n
\\n \\n
\\n
\\n
\\n

Invoice #120344

\\n

Billed July 21, 2019

\\n
\\n
\\n
\\n\")), mdx(\"h2\", null, \"Alerts and Notifications Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n

\\n Alerts & Notifications\\n

\\n
\\n
\\n
Company News
\\n

\\n Get Rocket news, announcements, and product updates\\n

\\n
\\n
\\n \\n \\n
\\n
\\n
\\n
\\n
Account Activity
\\n

\\n Get important notifications about you or activity you've\\n missed\\n

\\n
\\n
\\n \\n \\n
\\n
\\n
\\n
\\n

Meetups Near You

\\n

\\n Get an email when a Dribbble Meetup is posted close to my\\n location\\n

\\n
\\n
\\n \\n \\n
\\n
\\n
\\n
\\n\")), mdx(\"h2\", null, \"Profile Display Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n \\n \\n
\\n

Sam Russo

\\n

Senior Software Developer

\\n

Detroit, USA

\\n
\\n \\n \\n
\\n
\\n
\\n\")), mdx(\"h2\", null, \"Profile List Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n

Team Members

\\n
\\n
\\n \\n
\\n

Warren Briggs

\\n

\\n Online\\n

\\n
\\n \\n
\\n
\\n \\n
\\n

Lu Chen

\\n

\\n In a\\n meeting\\n

\\n
\\n \\n
\\n
\\n \\n
\\n

Lilah Loselev

\\n

\\n Not\\n Available\\n

\\n
\\n \\n
\\n
\\n \\n
\\n

Danny

\\n

\\n Offline\\n

\\n
\\n \\n
\\n
\\n
\\n\")), mdx(\"h2\", null, \"Blog Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n
\\n \\n

techlead

\\n\\n
\\n \\n \\n \\n \\n
  • \\n Edit Profile\\n
    • \\n
    • \\n\\n
  • Action 1
    • \\n
  • Action 2
    • \\n \\n
    \\n
    \\n \\n
    \\n

    A Dummy blog title sample

    \\n

    \\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed\\n do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\n Ut enim ad minim veniam, quis nostrud exercitation ullamco\\n laboris nisi ut aliquip ex ea commodo\\n

    \\n
    \\n \\n \\n
    \\n
    \\n \\n \\n \\n
    \\n
    \\n
    \\n\")), mdx(\"h2\", null, \"Simple Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
    \\n
    \\n

    Heading

    \\n

    Paragraph

    \\n
    \\n \\n
    \\n
    \\n
    \\n
    \\n
    \\n

    Heading

    \\n \\n
    \\n
    \\n
    \\n
    \\n

    Heading

    \\n\\n

    Paragraph

    \\n\\n \\n
    \\n
    \\n\")), mdx(\"h2\", null, \"Bordered Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
    \\n
    \\n

    Heading

    \\n

    Paragraph

    \\n
    \\n \\n
    \\n
    \\n
    \\n
    \\n
    \\n

    Heading

    \\n \\n
    \\n
    \\n
    \\n
    \\n

    Heading

    \\n\\n

    Paragraph

    \\n \\n
    \\n
    \\n
    \\n\")), mdx(\"h2\", null, \"Artwork Top Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
    \\n \\n
    \\n

    Heading

    \\n\\n

    Paragraph

    \\n
    \\n \\n
    \\n
    \\n
    \\n
    \\n \\n
    \\n

    Heading

    \\n

    Paragraph

    \\n \\n
    \\n
    \\n
    \\n\")), mdx(\"h2\", null, \"Artwork Middle Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
    \\n
    \\n

    Heading

    \\n\\n

    Paragraph

    \\n
    \\n\\n
    \\n\\n
    \\n \\n
    \\n \\n\")), mdx(\"h2\", null, \"Artwork Full Cards\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \" \\n
    \\n

    Heading

    \\n

    Paragraph

    \\n
    \\n
    \\n \\n
    \\n \\n\\n \\n
    \\n

    Heading

    \\n

    Paragraph

    \\n
    \\n
    \\n \\n
    \\n \\n \\n \\n
    \\n
    \\n Profile Card\\n Pro Component\\n
    \\n
    Profile cards
    \\n
    \\n \\n \\n \\n Chukwudi Mezue\\n \\n \\n Product Designer\\n

    \\n

    \\n Enugu, Nigeria\\n

    \\n \\n \\n \\n \\n
    \\n \\n
    \\n \\n \\n \\n \\n Chukwudi Mezue\\n \\n \\n Product Designer\\n

    \\n

    \\n Enugu, Nigeria\\n

    \\n \\n \\n \\n \\n
    \\n \\n \\n

    \\n Mac Xenon\\n

    \\n \\n Product Designer\\n

    \\n

    \\n Enugu, Nigeria\\n

    \\n \\n \\n \\n \\n
    \\n \\n \\n \\n \\n \\n

    \\n Mac Xenon\\n

    \\n \\n Product Designer\\n

    \\n

    \\n Enugu, Nigeria\\n

    \\n \\n \\n \\n \\n \\n

    \\n Mac Xenon\\n

    \\n \\n Product Designer\\n

    \\n

    \\n Enugu, Nigeria\\n

    \\n \\n \\n \\n\\n \\n\\n \\n \\n \\n \\n \\n
    \\n
    \\n \\n \\n
    \\n

    Chukwudi Mezue

    \\n

    Product Designer

    \\n

    Enugu, Nigeria

    \\n

    \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n

    \\n
    \\n \\n \\n
    \\n
    \\n
    \\n
    \\n \\n
    \\n \\n
    \\n

    Chukwudi Mezue

    \\n

    Product Designer

    \\n
    \\n
    \\n
    \\n

    \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n

    \\n
    \\n \\n \\n
    \\n
    \\n
    \\n \\n \\n \\n
    \\n
    \\n
    \\n \\n
    \\n

    Chukwudi Mezue

    \\n

    Product Designer

    \\n

    Enugu, Nigeria

    \\n

    \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n

    \\n
    \\n \\n \\n
    \\n
    \\n
    \\n
    \\n
    \\n
    \\n \\n \\n
    \\n

    Chukwudi Mezue

    \\n

    Product Designer

    \\n

    Enugu, Nigeria

    \\n
    \\n \\n \\n \\n
    \\n
    \\n \\n \\n
    \\n
    \\n
    \\n
    \\n \\n \\n
    \\n

    Chukwudi Mezue

    \\n

    Product Designer

    \\n

    Enugu, Nigeria

    \\n

    \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n

    \\n
    \\n \\n
    \\n
    \\n
    \\n
    \\n \\n
    \\n

    Chukwudi Mezue

    \\n

    Product Designer

    \\n

    Enugu, Nigeria

    \\n

    \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n

    \\n
    \\n \\n \\n
    \\n
    \\n
    \\n
    \\n \\n\")), mdx(\"h6\", null, \"Script\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \" \\n \\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"items":[{"url":"#metadescription-bootstrap-card-is-responsive-and-interactive-slideshow-which-is-created-for-presenting-content-especially-images-and-videos","title":"metaDescription: \"Bootstrap Card is responsive and interactive slideshow which is created for presenting content, especially images and videos\""}]},{"url":"#card","title":"Card","items":[{"url":"#basic-cards","title":"Basic Cards","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#widget-cards","title":"Widget Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#counter-cards","title":"Counter Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#rating-cards","title":"Rating Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#event-list-cards","title":"Event List Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#invoice-list-cards","title":"Invoice List Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#alerts-and-notifications-cards","title":"Alerts and Notifications Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]},{"url":"#profile-display-cards","title":"Profile Display Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-7","title":"html"}]}]}]}]},{"url":"#profile-list-cards","title":"Profile List Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-8","title":"html"}]}]}]}]},{"url":"#blog-cards","title":"Blog Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-9","title":"html"}]}]}]}]},{"url":"#simple-cards","title":"Simple Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-10","title":"html"}]}]}]}]},{"url":"#bordered-cards","title":"Bordered Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-11","title":"html"}]}]}]}]},{"url":"#artwork-top-cards","title":"Artwork Top Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-12","title":"html"}]}]}]}]},{"url":"#artwork-middle-cards","title":"Artwork Middle Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-13","title":"html"}]}]}]}]},{"url":"#artwork-full-cards","title":"Artwork Full Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-14","title":"html"},{"url":"#script","title":"Script"}]}]}]}]}]}]},"parent":{"__typename":"File","relativePath":"contrast/javascript/components/card.md"},"frontmatter":{"metaTitle":null,"metaDescription":null}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"c0b86fbb-a562-5d76-bfbe-fddc0a8827ae"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}