Career Path Generator
Examples of career paths you can build can be found
here
Font Family:
Arial
Arial Black
Comic Sans MS
Courier
Courier New
Georgia
Impact
Palatino
Roboto
Times New Roman
Verdana
Background Color:
Text Color:
Text Background Color:
Arrow Color:
Arrow Background Color:
Remove background behind arrow
Match arrow background to border color
Border Color:
Border Style:
Square
Circle
Solid
Import Configuration
Import File
Row Configuration
Delete Row
{{ rowIndex+1 }}
Add New Job Title
Add top border
Top Border Segments
{{ n }}
Hide segment {{ segmentIndex + 1 }}
Add bottom border
Bottom Border Segments
{{ n }}
Hide segment {{ segmentIndex + 1 }}
Delete:
{{ item.jobTitle.name }}
Visibility Hidden
Display None
Remove Text
Link this job
End of path
Rows #
Row {{ rowIndex+1 }}
Preview
View
{{item.jobTitle.name}}
{{item.jobTitle.name}}
DO NOT FORGET TO ADD ACCESSIBILITY TEXT
New Row
Export Configuration
Export code as text files
// Feel free to remove this mixin if you don't need it @mixin breakpoint($width) { @media screen and (min-width: $width) { @content; } } // Feel free to remove this class if you don't need it .wai { position: absolute !important; width: 1px; height: 1px; overflow: hidden; margin: 0; } // ============================ // Career Path // ============================ .career-path { padding: 25px; text-align: center; margin-bottom: 25px; font-family: {{ careerModel.fontFamily }}; background-color: #{{ careerModel.backgroundColor }}; @include breakpoint(800px) { padding: 50px 0; margin: 0; } > * { margin-left: auto; margin-right: auto; max-width: 800px; } * { box-sizing: border-box; font-family: inherit; &:last-chid { margin-bottom: 0; } } &__heading { font-size: 36px; margin-bottom: 1em; } &__intro { margin-bottom: 1em; } &__grid { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0; padding-top: {{ careerModel.borderWidth }}px; } // primary row that contains all secondary rows &__row { width: 100%; list-style: none; position: relative; margin-top: -{{ careerModel.borderWidth }}px; .js .enhance-element & { opacity: 0; } .js .enhance-element.active & { animation: fadein 0.5s forwards; $delay: 0; @for $i from 1 through 20 { $delay: $delay + .3; &:nth-child(#{$i+1}){ animation-delay: #{$delay}s; } } } } .starting-row { .career-path__title-container { margin-top: 0; } .career-path__title-row > * { min-height: 0; } } // secondary row that contains only border segments &__border-row { display: flex; justify-content: center; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; &.top { top: 0; } &.bottom { bottom: 0; } } // secondary row that contains only job title columns &__title-row { display: flex; justify-content: center; width: 100%; overflow: hidden; // each column that contains a job title > * { min-height: 116px; position: relative; } } // wrapping div for job title &__title-container { color: #000; display: inline-block; position: relative; z-index: 1; margin: 24px auto 28px; max-width: 100%; background-color: #{{ careerModel.backgroundColor }}; } // job title &__title { display: inline-block; padding: 8px 12px; margin-top: 4px; margin-bottom: 4px; background-color: #{{ careerModel.textBackground }}; color: #{{ careerModel.textColor }}; } // arrow icon .career-arrow { display: block; padding: 4px; border-radius: 50%; margin: 0 auto; width: 24px; height: 24px; fill: #{{ careerModel.arrowColor }};
background-color: #{{ careerModel.borderColor }};
background-color: transparent;
background-color: #{{ careerModel.arrowBackground }};
} // styles for borders .vertical-border { display: block; position: absolute; z-index: 0; height: 50%; left: 50%; transform: translateX(-50%); &.top { top: 0; } &.bottom { bottom: 0; transform-origin: left; transform: rotate(180deg) translateX(-50%); } &.full-height { height: calc(100% + 4px); } } .horizontal-border { position: relative; } #border-pattern { fill: #{{ careerModel.borderColor }}; } .hide-border { visibility: hidden; } // Column widths // so far there are 16 different widths @for $i from 1 through 16 { .width-#{$i} > * { width: calc(100% / #{$i}) } } .REMOVE_CLASS { width: auto !important; height: auto !important; color: red; font-weight: bold; overflow: visible !important; clip: auto !important; clip-path: none !important; } }