🤩
Windframe Import Update is finally here.

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.

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

Angular Bootstrap Widget

html
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

Angular Bootstrap Cards Widget

html
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

Angular Bootstrap Card Counter

html
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

Angular Bootstrap Widget Invoice

html
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

Angular Bootstrap Widgets Ratings

html
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

Angular Bootstrap Widget Event

html
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

Angular Bootstrap Widget Alerts and Notifications

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

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
colorStringSets background colorcolor="dark"
borderBooleanfalseGives borderborder=true

API Reference: Contrast Angular Bootstrap Card Body Properties

The table below lists other prop options of the CDBCardBody component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
cascadeBooleanfalseSwitches the CardBody to cascade style modecascade=true

API Reference: Contrast Angular Bootstrap Card Image Properties

The table below lists other prop options of the CDBCardBodyImage component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
cascadeBooleanfalseSwitches the CardBody to cascade style modecascade=true
hoverBooleanfalseSwitches on hover behaviourhover=true
overlayStringwhite-lightSets the color of hover overlayoverlay="white-light"
srcStringSource of the imagesrc="image_src"
topBooleanfalseMakes image fluidtop=true

API Reference: Contrast Card Text Properties

The table below shows the configuration options of the CDBCardText component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
mutedBooleanfalseMutes the text colormuted=true
smallBooleanfalseUses html small as component's tagsmall=true

API Reference: Contrast Card Title Properties

The table below lists other prop options of the CDBCardTitle component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
subBooleanfalseStyles title as subtitlesub=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

ad-banner

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