Skip to main content
Design & Development
Home
Accessibility at Radancy
Accessibility Pulse
Component Library
Component Library
Home
Components
Accordion
Animation Toggle
Breadcrumbs
Card
Disclosure
Hero Banner (Image)
Hero Banner (Video)
Horizontal Free-Scroller
Load More
Partial Disclosure
Rating
Select Navigation (External)
Select Navigation (Internal)
Step Indicator
TabList
Tile
Third-Party
Instagram Feed
YouTube Feed
Layouts
Advanced Job Details (AJD)
Career Path Generator (CPG)
FlexSpan Grid System (FGS)
Resources
CSS Animation Library
MagicBullet
MagicBullet
Home
Accessibility Patch
System Alert
Radancy DevBlog
User Interface Standards and Guidelines
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}}
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 .visually-hidden:not(:focus):not(:active) { clip-path: inset(100%); clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } // ============================ // Career Path // ============================ .career-path { background-color: #{{ careerModel.backgroundColor }}; font-family: {{ careerModel.fontFamily }}; margin-bottom: 25px; padding: 25px; text-align: center; @include breakpoint(50em) { margin: 0; padding: 50px 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; flex-wrap: wrap; justify-content: space-between; padding: 0; padding-top: {{ careerModel.borderWidth }}px; } // primary row that contains all secondary rows &__row { list-style: none; margin-top: -{{ careerModel.borderWidth }}px; position: relative; width: 100%; .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; left: 50%; margin: 0 auto; position: absolute; 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; overflow: hidden; width: 100%; // each column that contains a job title > * { min-height: 116px; position: relative; } } // wrapping div for job title &__title-container { background-color: #{{ careerModel.backgroundColor }}; color: #000; display: inline-block; margin: 24px auto 28px; max-width: 100%; position: relative; z-index: 1; } // job title &__title { background-color: #{{ careerModel.textBackground }}; color: #{{ careerModel.textColor }}; display: inline-block; margin-bottom: 4px; margin-top: 4px; padding: 8px 12px; } // arrow icon .career-arrow { border-radius: 50%; display: block; fill: #{{ careerModel.arrowColor }}; height: 24px; margin: 0 auto; padding: 4px; width: 24px;
background-color: #{{ careerModel.borderColor }};
background-color: transparent;
background-color: #{{ careerModel.arrowBackground }};
} // styles for borders .vertical-border { display: block; height: 50%; left: 50%; position: absolute; transform: translateX(-50%); z-index: 0; &.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 { clip-path: none !important; clip: auto !important; color: red; font-weight: bold; height: auto !important; overflow: visible !important; width: auto !important; } }