Steps allow you to create a series of steps that users can follow to complete a task. This is useful for onboarding, form completion, and many more.
Steps are automatically numbered and connected with lines. You can utilize colors to indicate progress through the steps.
= daisy_steps do |steps|
- steps.with_step(title: "Write Code", css: "step-primary")
- steps.with_step(title: "Release Code", css: "step-primary")
- steps.with_step(title: "Profit", css: "step-secondary")
- steps.with_step(title: "Rule the World")
You can also display steps vertically.
= daisy_steps(css: "steps-vertical") do |steps|
- steps.with_step(title: "Write Code", css: "step-primary")
- steps.with_step(title: "Release Code", css: "step-primary")
- steps.with_step(title: "Profit", css: "step-secondary")
- steps.with_step(title: "Rule the World")
You can customize the content of each step to include any (short) content
you want by using the number option.
You can also supply this via the data-content attribute in the html.
= daisy_steps do |steps|
- steps.with_step(html: { data: { content: "❤️" } })And you can alter the colors by supplying CSS for the after
pseudo-element. Note that you may need to use the !important modifier to
override the default styles.
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.