Changelog – delete this section
Guidelines for creating templates for others' to use
when creating templates for other people to use, bear in mind they are not designers and developers:
- they need to be able to easily select the important div. They'll struggle with deeply nested things with no padding/margin that makes the correct div difficult to find.
- deeply nested divs needs to have paddings that make them easy to select
-- cols must be easy to select and duplicate
-- cards must be easily selectable (for them to add borders and backgrounds)
- divs must accomodate many variants of copy. potentially long or short headings, long or short words, lots of text, or just a little.
- they need to be able to easily select the important div. They'll struggle with deeply nested things with no padding/margin that makes the correct div difficult to find.
- deeply nested divs needs to have paddings that make them easy to select
-- cols must be easy to select and duplicate
-- cards must be easily selectable (for them to add borders and backgrounds)
- divs must accomodate many variants of copy. potentially long or short headings, long or short words, lots of text, or just a little.
🌸 Note: For standard css, use the style manager options. For adding classes, use only Bootstrap classes.
🌸 Tip: use .BODY-WRAP to set paddings for all sections
🌸 Tip: set typography on the outermost div to apply to all content
Notes
-⚠️ class-names in capital letters are not functional. They are purely to make the divs in the Layer-manager possible to identify. Therefore they appear first.
-⚠️ some components are hand-crafted for specific content, marked with badge:
-⚠️ some components are hand-crafted for specific content, marked with badge:
crafted SECTION
Changelog V6
- no hidden button to style: the one top right will move itself on smaller screens
- removed to-top-button
- two menu bars: align center and align right
- moved Gobi float to right side, because of Cookiebot
- moved standard css to the style manager (such as positioning and flex)
- named all sections
- named all sections IDs
- adjusted typography scale
Notes
- pay special attention to text alignment
- removed to-top-button
- two menu bars: align center and align right
- moved Gobi float to right side, because of Cookiebot
- moved standard css to the style manager (such as positioning and flex)
- named all sections
- named all sections IDs
- adjusted typography scale
Notes
- pay special attention to text alignment
Helper classes – delete this section
Animations
Fade in-out to background colour
Done in Style manager > Extra
State:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
Hover:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
State:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
Hover:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
Ease in-out
Advanced object animations
Made with Animate library – see Confluence
Scroll-triggered animations
Done with AOS library – see Confluence
Dropshadows
Use Bootstrap classes shadow-sm shadow or shadow-lg. For hand-crafted shadows create with box shadow in Style Manager
shadow-sm
shadow
shadow-lg
Borders
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
⚠️ For custom borders on one, two, or three sides only:
- Style the element with desired border in the style manager
- add classes (for example) border-top-0 border-bottom-0 border-end-0
…this will give you the result like this box, and the columns of these sections
- Style the element with desired border in the style manager
- add classes (for example) border-top-0 border-bottom-0 border-end-0
…this will give you the result like this box, and the columns of these sections
More helper classes
See getbootstrap.com for more helper classes
Buttons – delete this section
Intro
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
crafted SECTION
{TITLE}
🌸 Tip: sidebar. Duplicate/remove .LIST-GROUP-ITEM
Heading
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Details
Location
{LOCATION}
Department
{DEPARTMENT}
Application deadline
{APPLICATION_DEADLINE}
Job ID
{JOB_ID}
Category
{CATEGORY}
Salary range
{SALARY_RANGE}
Contact
{CONTACT_PERSONS}
crafted SECTION
{TITLE}
🌸 Tip: sidebar. Duplicate/remove .LIST-GROUP-ITEM
Heading
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Details
{LOCATION}
{DEPARTMENT}
{APPLICATION_DEADLINE}
{JOB_ID}
{CATEGORY}
{SALARY_RANGE}
Contact
{CONTACT_PERSONS}
Image center
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Image floats
🌸 Tip: controlled by .float-start and .float-end
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
Zig-zag, vertical center align
Image
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
Image
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
Zig-zag, vertical top align
Image
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
Image
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
Card-grid, list
🌸 Tip: duplicate/remove .CARD-GRID-LIST-ITEM
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
⭐️
Emoji
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 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
Icon
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae a
Image
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 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
Image circle
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laue ipsa quae ab
illo inventore veritatis et quasi architecto beatae
Department for Administrative Affairs
Text
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo
Card-grid, basic
🌸 Tip: duplicate/remove .CARD-BASIC
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
Plain
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Plain w footer
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
9
Number center
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
9
Number left
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
Icon circle left & footer
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo""Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo"
Icon circle center & footer
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo""Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo"
Image circle left & footer
Sed ut perspiciatis unde omnis iste natus error sit volupta ab illo inventore veritatis et quasi architecto beatae vitaNOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus error sit volupta ab illo
Image circle center & footer
Sed ut perspiciatis unde omnis iste natus error sit volupta ab illo inventore veritatis et quasi architecto beatae vitaNOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus error sit volupta ab illo
Image circle center & footer
Sed ut perspiciatis unde omnis iste natus error sit volupta ab illo inventore veritatis et quasi architecto beatae vitaNOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus error sit volupta ab illo
Card image bottom
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Card image top & card footer
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Card-grid, overflows
🌸 Tip: duplicate/remove .CARD-OVERFLOW
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
Overflow number circle left
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed qSed 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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed q
Overflow number circle center
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Overflow text box center
Sed ut perspiciatis unde omnis iste natus
error sit volupta ab illo
inventore veritatis et quasi architecto beatae vitaNOTE: safari needs .d-flex .align-items-stretch on the .col for full
height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus
error sit volupta ab illo
Overflow text box left
Sed ut perspiciatis unde omnis iste natus
error sit volupta ab illo
inventore veritatis et quasi architecto beatae vitaNOTE: safari needs .d-flex .align-items-stretch on the .col for full
height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus
error sit volupta ab illo
Overflow icon circle center
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed q
Overflow icon circle left
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Overflow icon square center
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed q
Overflow icon square left
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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed q
Overflow image square center
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus error sit volupta ab illo
inventore veritatis et quasi architecto beatae vita
Overflow image circle center
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Card-grid, overlays
🌸 Tip: overlays has to be on cards
Card grid image gallery w captions
Figure caption
Figure caption
Figure caption
Card-grid, horizontal scroll ⚠️
🌸 Tip: .col- classes must be used to set width on the cards
🌸 Tip: duplicate / remove .CARD-BASIC
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
crafted SECTION
Card-grid, testimonials with video (HTML, Youtube, Vimeo)
🌸 Tip: duplicate / remove .CARD-BASIC
🌸 Info: portrait video format only
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo "Sed ut perspiciatis unde omnis iste natus err rem aperiam, eaque ipsa quae ab
illo"
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo "Sed ut perspiciatis unde omnis iste natus err rem aperiam, eaque ipsa quae ab
illo"
crafted SECTION
Card-grid, testimonials with video (HTML, Youtube, Vimeo)
🌸 Tip: duplicate / remove .CARD-BASIC
🌸 Info: portrait video format only
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo "Sed ut perspiciatis unde omnis iste natus err rem aperiam, eaque ipsa quae ab
illo"
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo "Sed ut perspiciatis unde omnis iste natus err rem aperiam, eaque ipsa quae ab
illo"
crafted SECTION
Card-grid, testmonials w Gobi
🌸 Tip: duplicate / remove .CARD-BASIC
🌸 Info: portrait video format only
⚠️ beware of responsiveness & gobi video width when adjusting .row-cols-
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
Video and video grid (HTML, Youtube, Vimeo)
🌸 Tip: duplicate / delete .VID-GRID-ITEM
🌸 Tip: control video width with .row-cols-
Video and video grid (HTML, Youtube, Vimeo)
🌸 Tip: duplicate / delete .VID-GRID-ITEM
🌸 Tip: control video width with .row-cols-
Carousel
🌸 Info: slide speed set on each image
Previous
Next
Gobi collection
Trigger offcanvas (slide up)
Leaflet map
🌸 Tip: remove class cs-darkmap to display light map
crafted SECTION