Avoimet työpaikat VR:llä

Blurb

See available positions
Button
{LOCATION}
{DEPARTMENT}
{APPLICATION_DEADLINE}
Avoimet työpaikat

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. 

🌸 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:
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

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)

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 

More helper classes

See getbootstrap.com for more helper classes

Buttons – delete this section

Icon buttons: set aria-lable attribute (describe what the button does / where it goes) in Settings-tab
Button groups
Button group fullwidth

Reilusti yhteisellä, merkityksellisellä matkalla

Olet tärkeä osa matkaamme juuri sellaisena kuin olet:
Rakennamme yhdessä parempaa huomista. 
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}
Button

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?

Erilaiset roolimme

VR:llä työskentelee tuhansia ammattilaisia hyvin erilaisissa tehtävissä – raiteilla ja tien päällä, kunnossapidossa, asiantuntijarooleissa ja erilaisissa toimistotöissä. Yhteistä kaikille rooleille on, että työ on yhteiskunnallisesti merkityksellistä: liikutamme ihmisiä ja arkea turvallisesti ja ympäristöystävällisesti joka päivä.

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 

Rekrytointiprosessimme

Hakemus

Jätä hakemuksesi järjestelmämme kautta. Käymme kaikki hakemukset huolellisesti läpi viimeistään hakuajan päätyttyä.

Esikarsinta ja haastattelu

Saatamme kutsua sinut video- tai puhelinhaastatteluun. Haastattelussa tutustumme sinuun ja osaamiseesi sekä keskustelemme kokemuksestasi, motivaatiostasi ja siitä, millainen tekijä olisit osaksi tiimiämme.

Soveltuvuus tehtävään

Tehtävästä riippuen arvioimme soveltuvuutta esimerkiksi soveltuvuusarvioinnin, terveystarkastuksen ja referenssien avulla. Joihinkin tehtäviin teetetään myös turvallisuusselvitys.

Valinnat

Olemme yhteydessä kaikkiin hakijoihin viimeistään, kun valinnat on tehty.

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, 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

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
Button
Button
Card-header

Kitchen sink

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
card-link
card-link
I am a list item in a list group
I am a list item in a list group
I am a list item in a list group
Button
Button

Card-grid, overflows

🌸 Tip: duplicate/remove .CARD-OVERFLOW
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
8

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
8

Overflow number circle center

NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Text

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 
Text

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

Some text over an image

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, 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-

Gobi collection

Trigger offcanvas (slide up)

Leaflet map

🌸 Tip: remove class cs-darkmap to display light map
crafted SECTION

I am a blockquote, here is my opinion with a fixed image background.

Avoimet työpaikat