FitFlex Style Guide
Typography
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Type Scale
Heading Hierarchy
Proin faucibus ex nec mauris sodales, sed elementum mi tincidunt. Sed viverra egestas nisi consequat. Fusce sodales ultrices augue a accumsan.
Heading H1
The primary display heading — the largest typographic statement on any page.
Heading H2
Section-level heading — anchors major content blocks.
Heading H3
Sub-section heading — groups related content within a section.
Heading H4
Card and panel heading — used inside components and cards.
Heading H5
Label-weight heading — eyebrows, captions, and tight groupings.
Heading H6
Smallest heading — metadata, footnotes, and fine-print labels.
Inline Elements
Standard Inline Elements
Text Treatments
Bold text dolor sit amet, consectetur link color adipisicing elit, accent text sed do eiusmod tempor hovered. Excepteur accent background cupidatat non proident officia sunt in culpa qui deserunt mest laborum.
Italic & Tooltip
Example iste natus error sit voluptatem italic text example doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo vei tooltip example architecto beatae explicabo.
Dropcaps
Q Curabitur feugiat pharetra leo sit amet sollicitudin. Nam vestibulum mi lectus, quis volutpat libero porttitor ut. Suspendisse vestibulum molestie eros ac aliquam. Sed at ligula tempus, porttitor tortora, pellentesque neque. Cras a neque quis dolor pretium fermentum.
D Curabitur feugiat pharetra leo sit amet sollicitudin. Nam vestibulum mi lectus, quis volutpat libero porttitor ut. Suspendisse vestibulum molestie eros ac aliquam. Sed at ligula tempus, porttitor tortora, pellentesque neque. Cras a neque quis dolor pretium fermentum.
Blockquote
Proin faucibus nec mauris a sodales, sed elementum mi tincidunt. Sed eget viverra egestas nisi in consequat. Fusce sodales augue a accumsan. Cras sollicitudin eget.
— Piter Bowman
Proin faucibus nec mauris a sodales, sed elementum mi tincidunt. Sed eget viverra egestas nisi in consequat. Fusce sodales augue a accumsan. Cras sollicitudin eget.
Image Alignment
Image Alignment
Proin faucibus ex nec mauris sodales, sed elementum mi tincidunt. Sed viverra egestas nisi in consequat. Fusce sodales ultrices augue a accumsan. Cras sollicitudin, ipsum eget blandit pulvinar, sapien eget risus condimentum nibh, a rutrum dolor quam feugiat elit.
Aenean vel augue maximus, placerat tellus a velit, pellentesque et neque. Sed lobortis, nisi in cursus vestibulum, ligula justo varius lectus, quis finibus purus nisl vel quam.
Curabitur ac tempor nisl, convallis facilisis ipsum. Praesent malesuada tempus dolor eget tempus. Ut eu euismod enim. Duis vel nibh euismod, rhoncus arcu at, sagittis velit.
List Styles
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
Checkmark List
- Suspendisse dignissim
- Nullam efficitur nunc
- Etiam eu lectus at lectus
Bullet List
- Suspendisse dignissim
- Nullam efficitur nunc
- Etiam eu lectus at lectus
- Etiam lobortis metus
Table
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
| # | Column 1 | Column 2 | Column 3 |
|---|---|---|---|
| 1 | Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| 2 | Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 |
| 3 | Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 |
Trusted by
Contact us
Ready to Train?
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.