About this set
Arrows that show movement from one stage to the next, for dashboards, how it works sections and case studies. The pipeline chevrons are four stages of a sales pipeline cut into notched arrow shapes with clip-path polygon, each with its stage name and count, getting darker toward the last stage. The process cards are four numbered steps of a publishing workflow joined by thin line arrows drawn with ::before and ::after on every card after the first, so you never add arrow markup between steps. The before and after comparison puts a gradient block arrow between two figures, a median page load of 4.8 seconds and 1.6 seconds. Below 640px every arrow turns to point down: the chevrons switch to a downward clip-path and stack, the line arrows rotate, and the block arrow turns 90 degrees, so the flow still reads top to bottom on a phone. The stages are ordered lists with an aria-label, and the figures are description lists, so the sequence and values are announced while the shapes stay silent. This set is a data and process display, not navigation; for clickable trails see the breadcrumbs pack.
What’s included
- Pipeline chevrons cut with clip-path polygon
- Process cards joined by pseudo-element line arrows
- Before and after figures with a gradient block arrow
- All arrows turn to point down below 640px
- Ordered lists and description lists for meaningful structure
Accessibility
Stages are ordered lists with an aria-label, so screen readers announce the number of steps and their order, and the comparison uses description lists. The arrows are clip-path shapes, pseudo-elements or aria-hidden spans with no text. Text on every pipeline colour meets 4.5:1. Nothing in this set is interactive or animated.
Customise it
Change the four pipeline backgrounds on .pipe li:nth-child() and the --tip depth of the point. --accent colours the line arrows and step numbers. In Tailwind the shapes are the chev, chev-first, chev-down, chev-down-first and block-arrow utilities.
