Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Toggle Snippets
Heads up! This alert needs your attention, but it's not super important.
.alert-primary {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
color: #fff !important;
background-color: #045fb4 !important;
border-color: transparent !important;}
Well done! This alert will show you some extra information.
.alert-info {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #f0f0f0 !important;
border-color: transparent !important;}
Well done! You successfully read this important alert link message.
.alert-success {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #e5f8d1 !important;
color: #3f6910 !important;
border-color: transparent !important;}
Warning! Better check yourself, you're not looking too good.
.alert-warning {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
color: #786600 !important;
background-color: #fff7c9 !important;
border-color: transparent !important;}
This is a danger alert — check it out!
.alert-danger {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
color: #801f00 !important;
background-color: #ffd8cc !important;
border-color: transparent !important;}
Well done! You successfully read this important alert link message with a close button.
.alert-success {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #e5f8d1 !important;
color: #3f6910 !important;
border-color: transparent !important;}
.btn-close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
opacity: .2;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
color: currentColor;
outline: none;}
Well done! You successfully read this important global message.
.alert-success .global {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #e5f8d1 !important;
color: #3f6910 !important;
border-color: transparent !important;
text-align: center;}
Well done! You successfully read this message with an icon.
.alert-info .icon {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #f0f0f0 !important;
border-color: transparent !important;}
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Also some extra text and a link.
.alert-secondary .alert-link {
color: #202326;
font-weight: 700;
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #f0f0f0 !important;
border-color: transparent !important;}
Buttons
Toggle Snippets
Primary
.btn-primary {
cursor: pointer;
background-color: #045fb4 !important;
padding: 1rem 1.5rem !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
color:#fff;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
border: 1px solid transparent;}
.btn-primary:hover {
background-color: #034482 !important;
border-color: transparent !important;
text-decoration: none;
color: #fff;}
Ghost
.btn-outline-primary {
cursor: pointer;
background-color: transparent;
background-image: none;
border-color: #045fb4 !important;
color: #045fb4 !important;
padding: 1rem 1.5rem !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
border: 1px solid transparent;}
.btn-outline-primary:hover {
color: white !important;
background-color: #045fb4 !important;
border-color: transparent !important;}
Link
.btn-link {
cursor: pointer;
background-color: transparent;
background-image: none;
color: #045fb4 !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
border: 1px solid transparent;}
.btn-link:hover {
text-decoration: underline;
background-color: transparent;
border-color: transparent;
color: #034482 !important;}
Medium
.btn-medium {
cursor: pointer;
background-color: #045fb4 !important;
padding: .5rem 1rem !important;
font-size: 1rem !important;
color: #ffffff;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
line-height: 1.5;
border-radius: .25rem;
border: 1px solid transparent;}
.btn-medium:hover {
background-color: #034482 !important;
border-color: transparent !important;
color: #ffffff;}
Medium Ghost
.btn-outline-medium {
cursor: pointer;
border-color: #045fb4 !important;
color: #045fb4 !important;
padding: .5rem 1rem !important;
font-size: 1rem !important;
background-color: transparent !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
line-height: 1.5;
border-radius: .25rem;
border: 1px solid transparent;}
.btn-outline-medium:hover {
color: white !important;
background-color: #045fb4 !important;
border-color: transparent !important;}
Medium Link
.btn-link-medium {
cursor: pointer;
font-size: .875rem !important;
padding: .08rem .4rem 0 !important;
color: #ffffff;
background-color: #045fb4 !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
line-height: 1.5;
border-radius: .25rem;
border: 1px solid transparent;}
.btn-link-medium:hover {
background-color: #034482 !important;
border-color: transparent !important;
color: #fff !important;}
Small
.btn-small {
cursor: pointer;
color: #045fb4 !important;
padding: .5rem 1rem !important;
font-size: 1rem !important;
background-color: transparent !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
line-height: 1.5;
border-radius: .25rem;
border: 1px solid transparent;}
.btn-link-medium:hover {
text-decoration: underline;
background-color: transparent;
border-color: transparent;
color: #034482 !important;}
Small Ghost
.btn-outline-small {
cursor: pointer;
font-size: .875rem !important;
padding: .08rem .4rem 0 !important;
background-color: transparent;
background-image: none;
border-color: #045fb4 !important;
color: #045fb4 !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
line-height: 1.5;
border-radius: .25rem;
border: 1px solid transparent;}
.btn-ghost-small:hover {
color: white !important;
background-color: #045fb4 !important;
border-color: transparent !important;}
Small Link
.btn-link-small {
cursor: pointer;
color: #045fb4 !important;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .25rem;
background-color: transparent !important;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;}
.btn-link-small:hover {
text-decoration: underline;
background-color: transparent;
border-color: transparent;
color: #034482 !important;}
Interface buttons
.btn-download {
cursor: pointer;
color: #fff !important;
padding: 3px 10px !important;
margin: 2px auto;
font-size: .875rem;
line-height: 1.5;
border-radius: .25rem;
background: #045fb4;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
text-transform: none;
overflow: visible;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;}
.btn-download:hover {
background-color: white;
border-color: #034482;
color: #034482 !important;}
.btn-star {
cursor: pointer;
color: #fff !important;
padding: 3px 10px !important;
margin: 2px auto;
font-size: .875rem;
line-height: 1.5;
border-radius: .25rem;
background: orange;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
text-transform: none;
overflow: visible;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;}
.btn-star:hover {
color: orange !important;
background-color: white !important;
border-color: orange !important;}
.btn-unstar {
cursor: pointer;
color: #fff !important;
padding: 3px 10px !important;
margin: 2px auto;
font-size: .875rem;
line-height: 1.5;
border-radius: .25rem;
background: #e69500;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
text-transform: none;
overflow: visible;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;}
.btn-unstar:hover {
color: #e69500 !important;
background-color: white !important;
border-color: #e69500 !important;}
.btn-delete {
cursor: pointer;
color: #fff !important;
padding: 3px 10px !important;
margin: 2px auto;
font-size: .875rem;
line-height: 1.5;
border-radius: .25rem;
background: #d55c5c;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
display: inline-block;
font-weight: 400;
text-align: center;
text-transform: none;
overflow: visible;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;}
.btn-delete:hover {
background: #fff;
border-color: #d55c5c;
color: #d55c5c;}
Badges
Toggle Snippets
Example heading New
.badge-primary {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
color: #fff;
background-color: #045fb4 !important;}Example heading New
.badge-secondary {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
color: #fff;
background-color: #034482 !important}Example heading New
.badge-pill {
display: inline-block;
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
color: #fff;
background-color: #045fb4 !important;}Forms
Toggle Snippets
Tables
Toggle Snippets
| Star | Details | Time |
|---|---|---|
| twenty-seventh motif | 2 unread | |
| crushing charge | 1 unread | |
| open-ended boilerplate | 7 unread |
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;}
table {
border-collapse: collapse;}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;}
.table-striped tbody tr:nth-of-type(2n+1) {
background-color: rgba(0, 0, 0, .05);}
.table td, .table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;}
Cards
Toggle Snippets
SecureDrop
SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
Visit website
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;}
.card-text{
color: #6c757d !important;}
SecureDrop
SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
Apply
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;}
.card-text{
color: #6c757d !important;}
SecureDrop
SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;}
.card-text{
color: #6c757d !important; }
A few things everyone can do now
Numerous people contribute to the project to varying extents.
- Consider contributing to help the SecureDrop project grow.
- Take a moment to donate to support further development.
- Help translate the documentation into other languages.
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;}
.card-text{
color: #6c757d !important;}
.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
.list-group {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;}
.mark, mark {
background-color: #e9ecef;
padding: .2em;
Pagination
Toggle Snippets
Scrollspy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
Styleguide code licensed under MIT, documents licensed under a Creative Commons Attribution 3.0 United States License. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
Templates and styles based on the Reproducible Builds styleguide.