SR Cards Steps 01 & 02



SR Cards Steps 01 & 02 are great for showing steps for a process.

Module Overview - SR Cards Steps 01 & 02

This module is a combination of headers, subheading, and cards with optional CTAs.

An ideal use case for SR Cards Steps 01 & 02 are for displaying steps taken to achieve a goal.





Module Settings Walkthrough

Styles

You can edit the following items within the Styles tab:

• Layout: page or full-width
• Container width: minimum, narrow, wide, maximum
• Top-bottom padding: default, no padding, small padding, large padding, custom padding
• Background option: image, video, color, custom, gradient
• Text align: right, left, center, justified
• Text color: auto, primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, custom
• Border styles: none, solid, dotted, dashed, double
• Responsive settings:
  • Tablet: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)
  • Mobile: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)





Module Settings

For SR Cards Steps 01 & 02 , most settings are focused on the header(s), subheaders, and cards

Header and Content

The first setting you see when editing SR Cards Steps 01 & 02 is the header.

You can have as many headers as you want. You can even choose which Size they are: H1, H2, H3, H4, H5, H6, P.

You can also choose the Display Size to L, XL, XXL, XXXL

You also have an option to create a sub-header or description





Editing the Cards

• You can have as many cards as you want
• Each card gives you the option to edit:
  • Step Number
  • Heading
    • Heading
    • Size
    • Display Size
    • Color
    • Align
    • CSS Class
  • Description
  • CTA
    • CTA Type
    • CTA Style
    • Button Text
    • Link
    • CTA Size
  • Text Color
  • Background Option
  • Background Color
  • Accent Color
  • Accent Color Hover





Editing the Grid

Editing the grid of the columns is fairly simple. You have a maximum cap of up to 4 items on a row, this means you have the option to select 2, 3 or 4 items to display per row.



How to Use SR Cards Steps 01 & 02 - See it Live

https://www.sprocketrocket.co/modules/sr-cards-steps-01

https://www.sprocketrocket.co/modules/sr-cards-steps-02