© Systems AXIS Limited,
2025.
axisfirst is a trading style of Systems AXIS Ltd. Head Office: AXIS House, 53/55 St Mary Street, Bridgwater, Somerset, TA6 3EQ. Registered Company 2370905 | VAT No. GB 515 8599 12
Demonstration Page of available sections and applicable styles.
Styling:
- Sections support adding a class "shadow" which will add in additional padding around the content + add a box-shadow encompassing the content + header.
- Sections support adding a background colour, this is done via the options cog for each section, this will also add in additional padding around the content.
- Cells / Cards can be center content by adding the class "text-center".
Things to keep in mind when troubleshooting styling issues:
- Check the source to see if any additional markup has been added if copying from Microsoft Products or other websites.
- Make sure you haven't added any additional <p>'s by hitting enter ( sometimes the Rich Editor adds them as well ..... )
- This page is modelled on the following document "Umbraco Website Section Content Templates.pdf" which can be found in the Axis First Branding design directory ( we don't support template 9 due to back office requirements ).
- Images, due to only supplying one image size if displaying multiple columns you need to supply oversized images ( If the objective is to have image spanning the entire width of the container ), the mobile breakpoint is 640px and all sections go down to a single column layout in mobile, the CSS should prevent images from overflowing the parent container.
- When defining a header image for a section / cell ( card ) keep it out of the Rich Text Editor as the CSS makes decisions based on the first element in a container being an image, if in a RTE then its very easy to accidently wrap the image in some markup up unintentionally.
- Please refrain from using absolute units if you need to write inline styles as this will not work for smaller devices.
Section Heading Text style
Section Type: 1 x Column ( Template 1 )
Displayed Content: Image & Rich Text
Section Class: header-one-column
Section Heading Text style
Sub copy text to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do text link style incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Section Heading Text style
Sub copy text to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do text link style incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Section Heading Text style
Sub copy text to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do text link style incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Section Heading Text Style
Section Type: 1 x column ( Template 1.2 )
Displayed Content: Rich Text
Section Class: one-column
Use this section if you don't want the header formatting.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do text link style incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do text link style incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Section Heading Text Style
Section Type: Header, 4 x column ( Template 2 )
Displayed Content: Image Top ( 1st row ), Rich Text ( 2nd Row ), 4 x Cards ( 3rd Row )
Section Class: header-multi-column
Section Heading Text Style
Sub copy text to feature
Heading text style to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorem.
Praesent ac sem
Aenean nec ligula gravida, condimentum urna id, vulputate tortor. In eget lorem vitae nunc fringilla rhoncus. Praesent ac sem eu felis rutrum lobortis non et quam.
Nisi odio dignissim
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pretium, velit vitae venenatis consequat, orci leo venenatis est,.
Aenean libero nulla
Praesent lacinia sapien a urna rutrum, quis efficitur elit dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque condimentum massa lacus, non volutpat libero blandit sit amet. Curabitur mauris tellus.
Heading text style to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorem.
Praesent ac sem
Aenean nec ligula gravida, condimentum urna id, vulputate tortor. In eget lorem vitae nunc fringilla rhoncus. Praesent ac sem eu felis rutrum lobortis non et quam.
Nisi odio dignissim
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pretium, velit vitae venenatis consequat, orci leo venenatis est,.
Aenean libero nulla
Praesent lacinia sapien a urna rutrum, quis efficitur elit dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque condimentum massa lacus, non volutpat libero blandit sit amet. Curabitur mauris tellus.
Heading text style to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorem.
Praesent ac sem
Aenean nec ligula gravida, condimentum urna id, vulputate tortor. In eget lorem vitae nunc fringilla rhoncus. Praesent ac sem eu felis rutrum lobortis non et quam.
Nisi odio dignissim
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pretium, velit vitae venenatis consequat, orci leo venenatis est,.
Section Heading Text Style
Section Type: 3 x column ( Template 3 )
Displayed Content: Image Top & Rich Text Bellow
Section Class: three-column
Aenean libero nulla
Praesent lacinia sapien a urna rutrum, quis efficitur elit dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque condimentum massa lacus, non volutpat libero blandit sit amet. Curabitur mauris tellus.
Heading text style to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorem.
Nisi odio dignissim
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pretium, velit vitae venenatis consequat, orci leo venenatis est.
Section Heading Text Style
Section Type: Small left 2 x Column ( Template 4 )
Displayed Content: Image & Rich Text
Section Class: two-cards
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Section Heading Text Style
Section Type: 2 x column ( Template 4 )
Displayed Content: Image & Rich Text
Section Class: two-cards
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Section Heading Text Style
Section Type: Small Right 2 x column ( Template 5 )
Displayed Content: Small Image & Rich Text
Section Class: two-cards
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Section Heading Text Style
Section Type: 2 x column ( Template 6 )
Displayed Content: Image Top & Rich Text Bottom
Section Class: two-cards
Cell Class: shadow
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.
Section Heading Text Style
Section Type: 3 x column ( Template 7 )
Displayed Content: Image Top & Rich Text Bottom
Section Class: three-column
Cell Class: shadow
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.
Section Heading Text Style
Section Type: 4 x column ( Template 8 )
Displayed Content: Image Top & Rich Text Bottom
Section Class: four-cards
Cell Class: Shadow
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.
Headline to feature here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.
Aenean libero nulla
Praesent lacinia sapien a urna rutrum, quis efficitur elit dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque condimentum massa lacus, non volutpat libero blandit sit amet. Curabitur mauris tellus.
Nisi odio dignissim
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pretium, velit vitae venenatis consequat, orci leo venenatis est.
Section Heading Text Style
Section Type: 1 x column
Displayed Content: Rich Text
Section Class: section-heading
For adding some text to the page that " appears " outside of a section but has its padding bottom removed to give the illusion it is grouped.