The Bootstrap notice cards
The notice card is like a typical yellow or other colored paper that you may stick as a reminder of some task or to write an important note and stick it to some easily “noticeable” place.
You may use notice card in websites for a special note to the users or for any other related purpose.
See the demos below where I created a few notice cards by using the Bootstrap framework along with customized CSS.
A yellow notice card with Bootstrap
In this template, a yellow notice card is created.
See online demo and code
The CSS:
.notice-card-shadow {
max-width: 350px;
position: relative;
}
.content-card{
margin-top:30px;
margin-left:50px;
}
.notice-card {
border-radius: 10px;
}
.notice-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(164, 164, 0, 0.5);
background-color: #FFFFFF;
color: #252422;
margin-bottom: 20px;
position: relative;
z-index: 1;
background: #FCEBA6;
}
.notice-card.card-information .content {
padding: 40px 55px;
text-align: center;
}
.notice-card .content {
padding: 20px 20px 10px 20px;
}
.notice-card .main-cat, .card .label {
font-size: 21px;
font-weight:800;
margin-bottom: 0px;
color: #7a9e9f;
}
.notice-card-shadow:before {
background-image: url("images/shadow-card.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 100%;
bottom: -12%;
content: "";
display: block;
left: -12%;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
h3 {
font-size: 1.3em;
font-weight: 900;
line-height: 1.5em;
width:auto;
color: #008000;
}
.notice-card .description {
font-size: 16px;
color: #66615b;
}
The Markup of the notice card:
<div class="row"> <div class="col-md-4 col-sm-6 content-card"> <div class="notice-card-shadow"> <div class="notice-card card-information"> <div class="content"> <div class="main-cat">The main title</div> <h3>Bootstrap Notice</h3> <p class="description">The note of the card goes here! The note of the card goes here! The note of the card goes here! The note of the card goes here!</p> </div> </div> </div> </div> </div>
Get the complete code from the demo page.
Another demo of notice card with pink color
Have a look at another template of notice card with pink color.
See online demo and code
The CSS used in the demo:
<style>
.notice-card-shadow {
max-width: 350px;
position: relative;
}
.content-card{
margin-top:30px;
margin-left:50px;
}
.notice-card {
border-radius: 10px;
}
.notice-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(164, 164, 0, 0.5);
color: #252422;
margin-bottom: 20px;
position: relative;
z-index: 1;
background: #F258DC;
}
.notice-card.card-information .content {
padding: 40px 55px;
text-align: center;
}
.notice-card .content {
padding: 20px 20px 10px 20px;
}
.notice-card .main-cat, .card .label {
font-size: 21px;
font-weight:800;
margin-bottom: 0px;
color: #E2E2E2;
}
.notice-card-shadow:before {
background-image: url("images/shadow-card.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 100%;
bottom: -20%;
content: "";
display: block;
left: 0%;
top:15%;
position: absolute;
right: -10%;
top: 0;
z-index: 0;
}
h3 {
font-size: 1.3em;
font-weight: 900;
line-height: 1.5em;
width:auto;
color: #37408C;
}
.notice-card .description {
font-size: 16px;
color: #FFFF00;
}
</style>
Get the complete code from the demo page.