SR Tabs Vertical 01
This module renders a heading, optional description, and a set of text-only tabs with a vertical list of short labels on the left and a matching content panel with its own heading and rich text on the right, with an optional sticky tab list.
On mobile the tabs collapse into a details or accordion list instead of side-by-side columns. Pick this over the horizontal tab modules when labels are short and you want a left-hand navigation rail rather than a row across the top, and over the accordion modules when you want a persistent side rail instead of stacked expandable rows.
Use cases
- FAQ with left-hand label list
- Product feature breakdown by category
- Service overview with side navigation
- Plan or package details rail
- Documentation-style tabbed content
- Policy or terms sections by topic
Where it fits
- Included with: Stack
- Page sections: FAQ, Features, Content
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| Background Video | File | Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Background Video Tablet | File | Repeats: min 0, default 1. This background video will only be used on tablet devices. |
| Background Video Mobile | File | Repeats: min 0, default 1. This background video will only be used on mobile devices. |
| Enabled | Boolean | |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Sticky | Boolean |
Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Tab Item Repeats: min 1, default 3.
| Field | Type | Notes |
|---|---|---|
| Tab Label | Text | |
| Tab Content | Rich text |
Tab Item › Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Columns › Tabs Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Columns › Content Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Style tab
Change log
| Version | Change |
|---|---|
| 4.0.2 | Added card styles on responsive settings |
| 4.0.1 | Text color fix |
| 4.0.0 | Stardust update |
| 3.2.1 | Column breakpoint fix |
| 3.2.0 | Accessibility improvements |
| 3.1.1 | Added scroll to top functionality when clicking on tabs |
| 3.1.0 | Added responsive background options |
| 3.0.0 | Removed jQuery |
SR Tabs Testimonials 01
This module renders a heading with optional description above a tabbed set of up to 4 testimonials, where each tab button carries an icon or svg marker and the panel below shows an optional photo, a name and title label, and a rich text quote.
SR Testimonials 03
This module renders a heading and description above a two-column slider of up to three testimonial slides, each pairing an icon or image on one side with an author name, title, and rich text quote on the other.