Learn more about what elements Framous will use for their website.
Framous is an online place to frame your amazing achievements. Whether it's your last run, triathlon or an epic journey you've been on. Connect your GPS tracker, customise your poster and let us present you with an amazing printed version of your story.
Colors
-
#59287a .bg-primary.text-primary
-
#87cefa .bg-secondary.text-secondary
-
#0dd157 .bg-success.text-success
-
#fb4143 .bg-danger.text-danger
-
#fab633 .bg-warning.text-warning
-
#2972fa .bg-info.text-info
-
#1b1e24 .bg-dark.text-dark
-
#f6f9fc .bg-light.text-light
-
#fff .bg-white.text-white
Typography
Headings
Heading 1
h1. Heading New
Heading 2
h2. Heading New
Heading 3
h3. Heading New
Heading 4
h4. Heading New
Heading 5
h5. Heading New
Heading 6
h6. Heading New
Google Fonts
Open Sans
Playfair Display
Aa
Open Sans
Playfair Display
Light
AaBbCcDd
Regular
AaBbCcDd
Bold
AaBbCcDd
Numbers (Light)
0123456789
Aa
Open Sans
Playfair Display
Light
AaBbCcDd
Regular
AaBbCcDd
Bold
AaBbCcDd
Numbers (Light)
0123456789
Lead
This is Lead text and vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, simple and easy for any content and other random text content is here est non commodo luctus.
Blockquotes
"vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, simple and easy for any content and other random text content is here est non commodo luctus."
"vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, simple and easy for any content and other random text content is here est non commodo luctus."
"vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, simple and easy for any content and other random text content is here est non commodo luctus."
Buttons
Border Radius
Types with Icons
Sizes
Colors
Outline Colors
Block
Forms
Alerts (Notifications)
This is a primary alert — check it out!
This is a secondary alert — check it out!
This is a light alert — check it out!
This is a dark alert — check it out!
Full Width
Use .rounded-0 class to .alert in full width mode to remove border radius.
This is a success alert — check it out!
This is a danger alert — check it out!
This is a warning alert — check it out!
This is a info alert — check it out!
Bootstrap Modals
Modal Types & Positions
Basic modal
Vertically centered modal
Scrolling long content
Modal Sizes
Small size
Large size
Tooltips & Popovers
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
Popover on top
Popover on right
Popover on bottom
Popover on left
Responsive Navigations
Other Components
Progress Bars
Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
List Groups
-
Jane Moris Pro saved your pin
5 minutes ago -
Alberta Watson is offering free coffee
12 minutes ago -
Htmlstream sent you a message
56 minutes ago -
Edmon Low Free saved your pin
2 hours ago
Tabs
Framous, you deserve to be! Print your amazing journey on a poster.
Framous, you deserve to be! Print your amazing journey on a poster.
Framous, you deserve to be! Print your amazing journey on a poster.
Framous, you deserve to be! Print your amazing journey on a poster.
Framous, you deserve to be! Print your amazing journey on a poster.
Framous, you deserve to be! Print your amazing journey on a poster.
Pagination
Page 2 of 5
Page 2 of 5
Pager
Images
