(Boostrap is required :-))
/* callout like bootstrap docs */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border: 1px solid #eee;
border-left: 5px solid #eee;
border-radius: 3px;
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}
.bs-callout-danger { border-left: 5px solid #dFb5b4; }
.bs-callout-danger h4 { color: #B94A48; }
.bs-callout-warning { border-left: 5px solid #C09853; }
.bs-callout-warning h4 { color: #f1e7bc; }
.bs-callout-info { border-left: 5px solid #d0e3f0; }
.bs-callout-info h4 { color: #3A87AD; }
.bs-callout-primary { border-left: 5px solid #285e8e; }
.bs-callout-primary h4 { color: #428bca; }
.bs-callout-success { border-left: 5px solid #398439; }
.bs-callout-success h4 { color: #5cb85c; }
Use it:
<div class="bs-callout bs-callout-primary">
<h4>Your Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit neque sed laoreet luctus.
Vestibulum laoreet nunc id nunc euismod, a lacinia mauris pharetra. Sed nec odio augue.
Duis gravida scelerisque tellus eget fermentum. Suspendisse potenti. Aliquam vel vehicula nunc.
Donec porta arcu at dui ultricies, vitae tempor quam scelerisque. Aenean id nibh pretium, suscipit dui et,
tempus risus. Vestibulum leo nisi, tristique eu interdum dignissim, hendrerit non ligula. Nam eget ultrices
turpis, nec venenatis mi. Integer vel tellus lorem.
<p/>
</div>
Your Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit neque sed laoreet luctus. Vestibulum laoreet nunc id nunc euismod, a lacinia mauris pharetra. Sed nec odio augue. Duis gravida scelerisque tellus eget fermentum. Suspendisse potenti. Aliquam vel vehicula nunc. Donec porta arcu at dui ultricies, vitae tempor quam scelerisque. Aenean id nibh pretium, suscipit dui et, tempus risus. Vestibulum leo nisi, tristique eu interdum dignissim, hendrerit non ligula. Nam eget ultrices turpis, nec venenatis mi. Integer vel tellus lorem.
Your Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit neque sed laoreet luctus. Vestibulum laoreet nunc id nunc euismod, a lacinia mauris pharetra. Sed nec odio augue. Duis gravida scelerisque tellus eget fermentum. Suspendisse potenti. Aliquam vel vehicula nunc. Donec porta arcu at dui ultricies, vitae tempor quam scelerisque. Aenean id nibh pretium, suscipit dui et, tempus risus. Vestibulum leo nisi, tristique eu interdum dignissim, hendrerit non ligula. Nam eget ultrices turpis, nec venenatis mi. Integer vel tellus lorem.
Your Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit neque sed laoreet luctus. Vestibulum laoreet nunc id nunc euismod, a lacinia mauris pharetra. Sed nec odio augue. Duis gravida scelerisque tellus eget fermentum. Suspendisse potenti. Aliquam vel vehicula nunc. Donec porta arcu at dui ultricies, vitae tempor quam scelerisque. Aenean id nibh pretium, suscipit dui et, tempus risus. Vestibulum leo nisi, tristique eu interdum dignissim, hendrerit non ligula. Nam eget ultrices turpis, nec venenatis mi. Integer vel tellus lorem.
etc ...
Commenti