Widgets
These are some components that can be found in the Contrast Bootstrap Angular library
React Bootstrap Widgets
Bootstrap 5 Widgets are third-party applications that are embedded into the website's body as a stand-alone feature.
An example of a website widget is the direct contact widget, which allows your users to contact you easily like the one found on our website.
Importing the Contrast Angular Bootstrap Card Module
To use the Contrast Angular Bootstrap Card component in your project you need to import CardModule
.
import {CardModule } from 'cdbangular';
Blog Card
We use the CDBCard component to create our widgets. Check our docs for more information on the CDBCard
component.
Our widget above has a dropdown, icons, and buttons. To have these things in your project you would have to import the CDBDropDown ( and dropdown affiliated components, see in the docs), CDBIcons, CDBBtn.
We also import CDBPane for the top of this widget.
html
<CDBCard style="width: 25rem"> <CDBCardBody class="p-1"> <CDBChip class="border-bottom p-3"> <CDBChipImage size="xs" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170"> </CDBChipImage> <CDBCardText class="m-0 ml-3">techlead</CDBCardText> <div class="ml-auto"> <CDBDropDown> <CDBDropDownToggle color="white" class="flat" (click)="menu.toggleDropdown($event)"> <CDBIcon class="text-muted" [fas]=true icon="ellipsis-h"></CDBIcon> </CDBDropDownToggle> <CDBDropDownMenu #menu="cdbDropdownMenu"> <CDBDropDownItem [disabled]=true>Edit Profile</CDBDropDownItem> <CDBDropDownItem [divider]=true></CDBDropDownItem> <CDBDropDownItem>Action 1</CDBDropDownItem> <CDBDropDownItem>Action 2</CDBDropDownItem> </CDBDropDownMenu> </CDBDropDown> </div> </CDBChip> <CDBCardImage class="img-fluid my-3" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></CDBCardImage> <div class="mx-2 mb-4"> <CDBCardTitle>A Dummy blog title sample</CDBCardTitle> <CDBCardText class="text-muted mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</CDBCardText> <div> <CDBBtn color="dark" class="py-1 mr-2"> <CDBIcon class="pl-0" [fas]=true icon="arrow-up"></CDBIcon> 11 </CDBBtn> <CDBBtn color="dark" class="py-1"> <CDBIcon class="pl-0" [fas]=true icon="arrow-down"></CDBIcon> 2 </CDBBtn> </div> <div class="my-2"> <CDBBtn [flat]=true color="none" class="p-0"> <CDBIcon [far]=true icon="comments"></CDBIcon> 21.4k </CDBBtn> <CDBBtn [flat]=true color="none" class="p-0 mx-4"> <CDBIcon [fas]=true icon="share"></CDBIcon> Share </CDBBtn> <CDBBtn color="warning" class="py-1"> <CDBIcon [far]=true icon="save"></CDBIcon> Save </CDBBtn> </div> </div> </CDBCardBody></CDBCard>
Widget Cards
html
<CDBCard style="width: 25rem"> <CDBCardBody> <CDBCardTitle class="lead">Total Downloads</CDBCardTitle> <CDBCardTitle tag="h2">1,057,891</CDBCardTitle> <CDBCardText [small]=true [muted]=true>Oct 1 - Dec 31, <CDBIcon [fas]=true icon="globe"></CDBIcon> Worldwide</CDBCardText> </CDBCardBody></CDBCard>
Counter Card
html
<CDBCard style="width: 25rem"> <CDBCardBody> <CDBIcon size="2x" class="p-4 bg-primary" [fas]=true icon="chart-line"></CDBIcon> <CDBCardTitle class="lead">Customers</CDBCardTitle> <CDBCardTitle tag="h2">852k</CDBCardTitle> <CDBCardText [small]=true [muted]=true>Oct 1 - Dec 31, <CDBIcon [fas]=true icon="globe"></CDBIcon> Worldwide </CDBCardText> <CDBCardText class="text-success"> <CDBIcon [fas]=true icon="angle-up"></CDBIcon> 27.4% <span style="font-size: 0.9em" class="ml-2 text-muted">Since last quarter</span> </CDBCardText> </CDBCardBody></CDBCard>
Invoices
html
<CDBCard style="width: 25rem"> <CDBCardBody class="p-0"> <CDBChip class="py-3 px-3 border-bottom"> <div> <CDBCardTitle class="mb-3 mt-0 lead">Order History</CDBCardTitle> <CDBCardText class="text-muted">Manage billing information and view receipts</CDBCardText> </div> </CDBChip> <CDBChip class="py-3 px-3 border-bottom"> <div> <CDBCardTitle class="mb-3 mt-0 h6">Invoice #120345</CDBCardTitle> <CDBCardText class="text-muted">Billed August 21, 2019</CDBCardText> </div> <div class="ml-auto"> <CDBBtn [outline]=true size="small" color="success" [flat]=true>Pay now</CDBBtn> </div> </CDBChip> <CDBChip class="py-3 px-3"> <div> <CDBCardTitle class="mb-3 mt-0 h6">Invoice #120344</CDBCardTitle> <CDBCardText class="text-muted">Billed July 21, 2019</CDBCardText> </div> </CDBChip> </CDBCardBody></CDBCard>
Ratings
html
<CDBCard style="width: 25rem"> <CDBCardBody> <CDBCardTitle class="lead">Average Rating</CDBCardTitle> <CDBCardTitle tag="h2">4.7</CDBCardTitle> <!-- <CDBRating [feedback]=true></CDBRating> --> <CDBCardText [muted]=true>Based on 231,156 ratings</CDBCardText> <div class="text-muted mt-4"> <div class="d-flex align-items-center"> <span>5</span> <CDBIcon [fas]=true icon="star" class="mr-3"></CDBIcon> <CDBProgress value=50 color="success"></CDBProgress> </div> <div class="d-flex align-items-center"> <span>4</span> <CDBIcon [fas]=true icon="star" class="mr-3"></CDBIcon> <CDBProgress value=40 color="warning"></CDBProgress> </div> <div class="d-flex align-items-center"> <span>3</span> <CDBIcon [fas]=true icon="star" class="mr-3"></CDBIcon> <CDBProgress value=30 color="primary"></CDBProgress> </div> <div class="d-flex align-items-center"> <span>2</span> <CDBIcon [fas]=true icon="star" class="mr-3"></CDBIcon> <CDBProgress value=20 color="dark"></CDBProgress> </div> <div class="d-flex align-items-center"> <span>1</span> <CDBIcon [fas]=true icon="star" class="mr-3"></CDBIcon> <CDBProgress value=10 color="danger"></CDBProgress> </div> </div> </CDBCardBody></CDBCard>
Events
html
<CDBCard style="width: 25rem"> <CDBCardTitle class="lead p-4 border-bottom" style="font-weight: 600">Events</CDBCardTitle> <CDBCardBody class="py-0"> <CDBChip class="border-bottom pb-2"> <CDBIcon size="4x" [far]=true icon="calendar-alt" class="text-danger"></CDBIcon> <div class="ml-3"> <CDBCardTitle class="mb-1 lead" style="font-weight: 600">Newmarket Nights</CDBCardTitle> <CDBCardText class="mb-2">Organized by University of Oxford</CDBCardText> <CDBCardText class="mb-0 small text-muted">Time: 6:00AM</CDBCardText> <CDBCardText class="mb-0 small text-muted">Place: Cambridge Boat Club, Cambridge</CDBCardText> </div> </CDBChip> <CDBChip class="border-bottom pb-2"> <CDBIcon size="4x" [far]=true icon="calendar-alt" class="text-danger"></CDBIcon> <div class="ml-3"> <CDBCardTitle class="mb-1 lead" style="font-weight: 600">Noco Hemp Expo</CDBCardTitle> <CDBCardText class="mb-2">Organized by University of Oxford</CDBCardText> <CDBCardText class="mb-0 small text-muted">Thu, 12 Sep - Sat, 18 Sep 2020</CDBCardText> <CDBCardText class="mb-0 small text-muted">PPlace: Denver Expo Club, USA</CDBCardText> </div> </CDBChip> <CDBChip class="pb-2"> <CDBIcon size="4x" [far]=true icon="calendar-alt" class="text-danger"></CDBIcon> <div class="ml-3"> <CDBCardTitle class="mb-1 lead" style="font-weight: 600">Canadian National Exhibition (CNE) </CDBCardTitle> <CDBCardText class="mb-2">Organized by University of Oxford</CDBCardText> <CDBCardText class="mb-0 small text-muted">Fri, 20 Sep - Mon, 07 Oct 2020</CDBCardText> <CDBCardText class="mb-0 small text-muted">Place: Toronto , Canada</CDBCardText> </div> </CDBChip> </CDBCardBody> <CDBCardText class="p-4 text-center pointer border-top">See All</CDBCardText></CDBCard>
Alerts and Notifications
html
<CDBCard style="width: 25rem"> <CDBCardBody class="py-0"> <CDBCardTitle class="lead m-0 py-3 border-bottom">Alerts & Notifications</CDBCardTitle> <CDBChip class="py-3 border-bottom"> <div> <CDBCardTitle class="my-0 mb-2 h6">Company News</CDBCardTitle> <p class="small m-0">Get Rocket news, announcements, and product updates</p> </div> <CDBCheckbox class="ml-auto"></CDBCheckbox> </CDBChip> <CDBChip class="py-3 border-bottom"> <div> <CDBCardTitle class="my-0 mb-2 h6">Account Activity</CDBCardTitle> <p class="small m-0">Get important notifications about you or activity you've missed</p> </div> <CDBCheckbox class="ml-auto"></CDBCheckbox> </CDBChip> <CDBChip class="py-3"> <div> <CDBCardTitle class="my-0 mb-2 h6">Meetups Near You</CDBCardTitle> <p class="small m-0">Get an email when a Dribbble Meetup is posted close to my location</p> </div> <CDBCheckbox class="ml-auto"></CDBCheckbox> </CDBChip> </CDBCardBody></CDBCard>
API Reference: Contrast Angular Bootstrap Card Props
This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Card component. You will find out what these props do, their default values, and how you would use them in your code.
The table below lists other prop options of the CDBCard
component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
class | String | Adds custom classes | class="myClass" | |
color | String | Sets background color | color="dark" | |
border | Boolean | false | Gives border | border=true |
API Reference: Contrast Angular Bootstrap Card Body Properties
The table below lists other prop options of the CDBCardBody
component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
class | String | Adds custom classes | class="myClass" | |
cascade | Boolean | false | Switches the CardBody to cascade style mode | cascade=true |
API Reference: Contrast Angular Bootstrap Card Image Properties
The table below lists other prop options of the CDBCardBodyImage
component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
class | String | Adds custom classes | class="myClass" | |
cascade | Boolean | false | Switches the CardBody to cascade style mode | cascade=true |
hover | Boolean | false | Switches on hover behaviour | hover=true |
overlay | String | white-light | Sets the color of hover overlay | overlay="white-light" |
src | String | Source of the image | src="image_src" | |
top | Boolean | false | Makes image fluid | top=true |
API Reference: Contrast Card Text Properties
The table below shows the configuration options of the CDBCardText component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
class | String | Adds custom classes | class="myClass" | |
muted | Boolean | false | Mutes the text color | muted=true |
small | Boolean | false | Uses html small as component's tag | small=true |
API Reference: Contrast Card Title Properties
The table below lists other prop options of the CDBCardTitle
component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
class | String | Adds custom classes | class="myClass" | |
sub | Boolean | false | Styles title as subtitle | sub=true |
Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast