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
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)
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
- Display Size
- CSS Class
- CTA Type
- CTA Style
- Button Text
- 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