Flexible Layout Examples
This is the hero marquee. It’s content (everything in a WYSIWYG) can be horizontally left, right, or center aligned, and vertically top, bottom, or center. The background image can be set to scale from the top, left, right or bottom of the marquee. The background overlay color, opacity and blend mode can be edited.
Building a page
- Create rows, each row using a 12-column grid
- Add sections, choosing how many columns each section should use. The combined number of columns between all sections in a row should add up to 12.
- Drop in the content components (e.g. marquee, slideshow, accordion, video, process list, forms, etc.) – these will be placed within that section for large screens.
On small screens, the 12 column grid is simplified and most components are displayed on the page in a left to right, top down ordering.
Process List
-
Knee Step Link
Find right provider
I'm baby literally trust fund put a bird on it austin
-
Hip Step Link
Book it!
I'm baby literally trust fund put a bird on it austin
-
Shoulder Link
Visit
I'm baby literally trust
Text Title
Wolf pabst flexitarian, jianbing pok pok yr butcher chia 8-bit banh mi tattooed locavore. Kinfolk taiyaki vice shabby chic, unicorn jean shorts enamel pin godard health goth truffaut salvia flexitarian williamsburg. Beard echo park blue bottle marfa mlkshk jianbing. Polaroid mustache ugh viral subway tile.
Beard flannel fam seitan. Gluten-free normcore semiotics humblebrag, cred gochujang portland XOXO sustainable skateboard etsy jianbing fashion axe. Waistcoat tumeric pok pok, tilde actually food truck hot chicken master cleanse freegan meh. Pitchfork hashtag banh mi activated charcoal, franzen kombucha typewriter irony kitsch distillery air plant cliche raw denim you probably haven't heard of them.
Text Title
Wolf pabst flexitarian, jianbing pok pok yr butcher chia 8-bit banh mi tattooed locavore. Kinfolk taiyaki vice shabby chic, unicorn jean shorts enamel pin godard health goth truffaut salvia flexitarian williamsburg. Beard echo park blue bottle marfa mlkshk jianbing. Polaroid mustache ugh viral subway tile.
Beard flannel fam seitan. Gluten-free normcore semiotics humblebrag, cred gochujang portland XOXO sustainable skateboard etsy jianbing fashion axe. Waistcoat tumeric pok pok, tilde actually food truck hot chicken master cleanse freegan meh. Pitchfork hashtag banh mi activated charcoal, franzen kombucha typewriter irony kitsch distillery air plant cliche raw denim you probably haven't heard of them.
Marginless content in 6 col
And an image in 6 col.
Row background color is set to Gray 5.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis.
Marginless content in 6 col
And an image in 6 col.
Row background color is set to Gray 5.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis.
Three Sections
One with a description list, and two with WYSIWYG format
Vestibulum ultrices, velit ac ultrices elementum, felis urna semper tortor, a eleifend orci erat non ligula.
Velit ac ultrices elementum, felis urna semper tortor, a eleifend orci erat non ligula.
This is the shoulder description
Content WYSIWYG
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis.
Dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis.
Content WYSIWYG
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis.
Dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis pharetra dolor nunc natoque consequat, felis.
Being a Crestner nurse
Image Gallery on the left with a title, and Tabs with a title on the right.
Team Culture
Exciting Benefits
WYSIWYG with a table
Optional title and optional sub text can be added to a row. These can be left, center or right aligned.
This row has a 2 column section on the left that is blank, an 8 column section in middle with content, and a 2 column section on the right that is blank.
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
Vertical Cards
Vertical card examples with no button on card. The entire card can be clicked.
Horizontal Cards
Horizontal card examples with one button on card and the image inset. The entire card can be clicked.
Physical Therapy
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
View Details
Massage Therapy
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
More about our servicesOur Practice Pets
The slideshow offers options to show/hide the arrow controls, show/hide thumbnails (defaults to dot navigation on mobile), show/hide dot navigation, and other settings. Refer to the Slideshow component.
Content with Sidebar
Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam. In imperdiet eros id lacus vestibulum vestibulum. Suspendisse fermentum sem sagittis ante venenatis egestas quis vel justo.
Maecenas semper suscipit nunc, sed aliquam sapien convallis eu. Nulla ut turpis in diam dapibus consequat. Sed dapibus ex a mauris posuere, et elementum nunc sollicitudin. Maecenas tempus dolor ac mi hendrerit, non sollicitudin ante feugiat. In hac habitasse platea dictumst. Donec ullamcorper nibh nibh, id facilisis magna bibendum in.
Headline Two
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor. Voluptate exercitation incididunt aliquip deserunt reprehenderit elit laborum.
Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam. In imperdiet eros id lacus vestibulum vestibulum. Suspendisse fermentum sem sagittis ante venenatis egestas quis vel justo.
Form Goes Here
Additional Collapsed Info
This is the panel for knee
This is the panel for hip
This is the panel for shoulder
Virtual Class Live Feed
Out of the box, the video component accepts YouTube, Vimeo, and HTML5 video. A poster (placeholder image) can also be defined. The play icon color and circle color and opacity can also be modified.
Cancer Care Locations
Location Feed Goes Here
Events & Classes
Events Feed Goes Here
Recent News
News Feed Goes Here