Headings
Heading 1
Heading 1
Heading 2
Heading 2
Heading 2 Small
Heading 2 Small
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
| Heading | font | line-height | margin |
|---|---|---|---|
Heading 1 |
|||
Heading 2 |
|||
Heading 2 Small |
|||
Heading 3 |
|||
Heading 4 |
|||
h5 is not currently styled
Heading 5
|
|||
h6 is not currently styled
Heading 6
|
Headings with classes
Headings with .h1
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Headings with .h2
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Headings with .h2-small
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Headings with .h3
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Headings with .h4
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Headings with .h5
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Headings with .h6
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Smile After
h1.smile-after — single line
Your Smile Beams
↑ next element starts here
h2.smile-after — single line
Patient Feedback
↑ next element starts here
h3.smile-after — single line
About Beam Orthodontics
↑ next element starts here
div.smile-after
↑ next element starts here
Colours
default (yellow)
Personalized Care
smile-teal
Personalized Care
smile-red
Personalized Care
Indent variant
smile-indent — smile extends left of the text
h4.smile-after.smile-small.smile-indent
1
h2.smile-after.smile-indent
2
Text
Paragraph (23px) – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet tincidunt urna, ac molestie elit viverra sed. Maecenas rhoncus nisl purus, eget finibus mauris venenatis sit amet. Nunc tincidunt sed magna a tincidunt. Maecenas nunc ex, imperdiet in scelerisque in, sodales vel arcu. Pellentesque fringilla mattis est eget egestas. Mauris eu lorem quis nisl sagittis euismod. Sed ultricies, augue in condimentum venenatis, turpis lectus sagittis elit, vitae porttitor eros eros quis ipsum.
Paragraph .body-sm (19px) – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet tincidunt urna, ac molestie elit viverra sed. Maecenas rhoncus nisl purus, eget finibus mauris venenatis sit amet. Nunc tincidunt sed magna a tincidunt. Maecenas nunc ex, imperdiet in scelerisque in, sodales vel arcu. Pellentesque fringilla mattis est eget egestas. Mauris eu lorem quis nisl sagittis euismod. Sed ultricies, augue in condimentum venenatis, turpis lectus sagittis elit, vitae porttitor eros eros quis ipsum.
Content width – this should be ~70 characters wide. Donec facilisis egestas nulla vel condimentum. Praesent quis lectus nec velit rhoncus ultricies ac quis mi. Mauris mattis lacus magna, venenatis faucibus nisi rhoncus non. Aenean ut facilisis nisl. Nam ullamcorper nunc augue, at dignissim neque cursus nec. Nunc ut lorem at tortor malesuada tempus ac sed felis. Mauris egestas leo eget justo vehicula iaculis. Cras rutrum malesuada pulvinar. Fusce porta augue quis feugiat consectetur. Nam pharetra erat eu efficitur placerat. Phasellus non placerat sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Italic Text
Link
Bold Link
Unordered List
- List item 1
- List item 2
- List item 3
- List item 4
Ordered List
- List item 1
- List item 2
- List item 3
- List item 4
Heading 1
Base font size. Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Large font size. Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
XL font size. Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Heading 2
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Heading 3
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Heading 4
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Heading 5
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Paragraph (Below)
Paragraph Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Strong text. Font Bold Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed. Etiam purus massa, vestibulum a velit ac, facilisis suscipit tortor. Aenean non libero in elit commodo venenatis varius sed diam.
Lorem ipsum dolor sit amet, Em in Paragraph consectetur Italic Text adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed. Etiam purus massa, vestibulum a velit ac, facilisis suscipit tortor. Aenean non libero in elit commodo venenatis varius sed diam.
Lorem ipsum Font Bold adipiscing elit.
Strong text. Line break.
Em Text Lorem ipsum Italic Text.
Unordered List
- Placeholder item one
- Placeholder item two
- Placeholder item three
- Placeholder item four
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
- Placeholder item one
- Placeholder item two Placeholder item two Placeholder item two Placeholder item two Placeholder item two Placeholder item two Placeholder item two Placeholder item two Placeholder item two
- Placeholder item three
- Placeholder item four
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Ordered List
- First placeholder step
- Second placeholder step
- Third placeholder step
- Fourth placeholder step
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
- First placeholder step
- Second placeholder step
- Third placeholder step
- Fourth placeholder step
Lorem ipsum dolor sit amet, Link in Paragraph consectetur adipiscing elit. Curabitur sagittis molestie elit, in maximus quam mattis eget. Quisque imperdiet sed urna malesuada mollis. Sed volutpat malesuada tellus ac gravida. Morbi ac ultricies quam. Aliquam sed lacus suscipit, commodo turpis in, volutpat massa. Donec mattis quam mi, sit amet fermentum diam dictum sed.
Buttons
| Description | Classes | Using <button> | Using <a> |
|---|---|---|---|
| Button | button |
Book Now | |
| Button Disabled | button |
||
| Button Header | button button-header |
Book Now | |
| Button Short | button button-short |
Book Now | |
| Button Form | button button-form |
Book Now | |
| Button Transparent | button button-transparent |
Book Now | |
| Button Transparent Disabled | button button-transparent |
||
| Button Link | button-link |
Button Link | |
| Button Link Yellow | button-link-yellow |
Button Link | |
| Link | Link |
Buttons on Dark Background
| Description | Classes | Using <button> | Using <a> |
|---|---|---|---|
| Button | button |
Book Now | |
| Button Disabled | button |
||
| Button Header | button button-header |
Book Now | |
| Button Short | button button-short |
Book Now | |
| Button Form | button button-form |
Book Now | |
| Button Transparent | button button-transparent |
Book Now | |
| Button Transparent Disabled | button button-transparent |
||
| Button Link | button-link |
Button Link | |
| Button Link Yellow | button-link-yellow |
Button Link | |
| Link | Link |
Colours
Forms
Some instructions...
Alerts
With two lines
Don't do that