This template showcases Belvedere Trading's visual language and demonstrates how to use our additional UI styles and classes.
Our styles are a layer built on top of Bootstrap. For Bootstrap documentation, go here. Our styles will automatically be applied on top when Bootstrap class names are used.
Roboto is our primary typeface, chosen for its similarity to DIN, the typeface used on many highway signs. People process information more quickly when the typeface is familiar. Please use Roboto as much as possible.
.roboto
.font-weight-base
.font-weight-med
.font-weight-heavy
Declare primary typographic rules as a style on the section's parent div.
Eyebrows are design elements used to denote sections where headers are not necessary.
.eyebrow
These are the classes used to declare div background colors.
Please note, our styles include additional secondary and accent colors. Secondary and accent colors should be used sparingly outside of the pre-defined framework. Please be mindful of the secondary and accent colors when declaring color classes. Our accent color is meant to quickly draw the eye to important information.
These are the classes used to declare text colors.
These are the classes used to declare border colors.
These are the classes used to declare div shadows. Please use them sparingly, to highlight information.
These are the classes used to declare div margins. You may specify margins for the entire div, or margins for any side of a div. Class names are below.
These are the classes used to declare div margins. You may specify margins for the entire div, or margins for any side of a div. Class names are below.
Additional classes can be used to declare more granular layout that isn't covered by the bootstrap responsive grid.
.flex .flex-row (default)
.flex .flex-column
Note that these styles can also be applied vertically
.flex-justify-space-between
.flex-justify-space-around
.flex-justify-center
.flex-justify-start
.flex-justify-end
IMPORTANT: When laying out divs that will contain large blocks of continuous text, make column width as narrow as possible up to 10-12 characters per line. The narrower the text column, the faster the user will be able to read.
Declaring flex-wrap on the parent container will wrap the child divs. flex-no-wrap will prevent wrapping. .overflow will declare .overflow-auto.
.flex .flex-row .flex-wrap
.flex .flex-row .flex-no-wrap
Applying flex-grow to the child div will stretch it to fill the height or width of the parent container, depending on which flex direction is specified. Note the difference between this class and the CSS usage of flex-grow.
This div has a specified height.
In instances where scaling the child div to the height of the parent div is necessary, Margin provides the .width-full class and the .height-full class.
The parent div has a specified width.
The parent div has a specified height.
.overflow
This div has a specified height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu augue vitae arcu vestibulum volutpat congue eu mauris. Vestibulum vel mauris id libero convallis vestibulum quis ut ex. Aliquam ut magna pulvinar, interdum ligula ut, gravida lorem. Sed eu faucibus odio, placerat finibus augue. Fusce interdum leo enim, quis dignissim leo maximus non. Nam vel scelerisque quam. Suspendisse blandit mi mi, non viverra nisl tempus a. Phasellus condimentum bibendum ipsum vel placerat. In efficitur suscipit diam sed eleifend. Curabitur sed arcu sit amet leo lacinia faucibus. Aliquam et lectus tempus, dapibus erat ac, rutrum libero. Proin magna eros, tempus eu nunc in, condimentum aliquam dui. Integer ac dignissim quam. Phasellus tristique quam sit amet tellus ultricies, sed fermentum metus suscipit. Aenean venenatis sagittis elementum. Nam erat nisl, elementum iaculis condimentum quis, dictum non ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu augue vitae arcu vestibulum volutpat congue eu mauris. Vestibulum vel mauris id libero convallis vestibulum quis ut ex. Aliquam ut magna pulvinar, interdum ligula ut, gravida lorem. Sed eu faucibus odio, placerat finibus augue. Fusce interdum leo enim, quis dignissim leo maximus non. Nam vel scelerisque quam. Suspendisse blandit mi mi, non viverra nisl tempus a. Phasellus condimentum bibendum ipsum vel placerat. In efficitur suscipit diam sed eleifend. Curabitur sed arcu sit amet leo lacinia faucibus. Aliquam et lectus tempus, dapibus erat ac, rutrum libero. Proin magna eros, tempus eu nunc in, condimentum aliquam dui. Integer ac dignissim quam. Phasellus tristique quam sit amet tellus ultricies, sed fermentum metus suscipit. Aenean venenatis sagittis elementum. Nam erat nisl, elementum iaculis condimentum quis, dictum non ipsum.
Note that .clear will clear div positioning for all subsequent divs.
Panels can be used in two ways, default and with custom colors. Class names are specified in panel titles.
Below is an example of how to customize panel colors. Panels may also have clickable headers.
<div class="panel border-brand-primary">
<div class="panel-heading panel-header-clickable bg-brand-primary">
<h3 class="panel-title white">bg-brand-primary white</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Use the card class in the context of the bootstrap grid system.
<div class="row">
<div class="col-xs-3 col-sm-6 col-m-t-xl">
<div class="card p-base shadow-light m-b-xl">
<h3>.card</h3>
</div>
</div>
<div class="col-xs-3 col-sm-6 col-m-t-xl">
<div class="card p-base shadow-light m-b-xl">
<h3>.card</h3>
</div>
</div>
<div class="col-xs-3 col-sm-6 col-m-t-xl">
<div class="card p-base shadow-light m-b-xl">
<h3>.card</h3>
</div>
</div>
<div class="col-xs-3 col-sm-6 col-m-t-xl">
<div class="card p-base shadow-light m-b-xl">
<h3>.card</h3>
</div>
</div>
</div>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |