Story Cards

Templates

Story Cards: /sitecore/templates/Project/GoTo Shared/Story Cards/Story Cards - {43EFA24A-93F3-40C5-9051-770CA6B04FB2}

    Card Section: /sitecore/templates/Project/GoTo Shared/Story Cards/Card Section - {B5151D8C-4AB3-4407-AAC7-C8BB514F4498}

        Story Card: /sitecore/templates/Project/GoTo Shared/Story Cards/Story Card - {D1BF376E-0150-4B92-9CD3-C86F2CAAB7F1}

Renderings

Global Story Cards: /sitecore/layout/Renderings/Project/GoTo/Story Cards/Global Story Cards - {5D340805-4C79-41AB-A970-D4E225DA9A2F}

- Demonstrated at 1, 3, 5 and 6 cards. Supports 1-6 cards per row; tablet caps at 2. Center alignment shown on the 1-card example, Left on the 3-card example.

- The 5-card example is set to 3 cards per row so the second row shows how a partial row resolves.

- The second row of an incomplete set is hard coded to centre. It is not an author-controlled field.

- Use Tabs is demonstrated in its own example below the card-count set: 3 tabs, 3 cards per tab. Every other example on this page has Use Tabs off.

- Use Tabs supports 2-6 tabs. Each tab is a Card Section, and the tab label comes from that section's Label field.

- CTA slots are varied deliberately so every combination is visible: all six on the 1-card example, primary only on 3 cards, secondary only on 5 cards, tertiary only on 6 cards, primary and secondary on the tabbed example. Bottom CTAs appear on the 1-card example only. The modifier examples below all use primary only, so the modifier is the only variable.

- Header Size default Header-700; options Header-600 and Header-700.

- Sub Header Size default Body-700; options Body-600 and Body-700.

- Padding default Comfortable; options Comfortable, Cozy and Compact. Cozy (48px top and bottom) and Compact (24px) each have their own example below. Comfortable (72px) is the default and is used on every other example on this page.

- On Dark is a component-level checkbox. Individual cards inherit it; there is no card-level dark setting.

- Mobile Card Scroll is demonstrated at 6 cards so the horizontal scroll is visible on mobile. Cards stack vertically on mobile unless it is set.

- Framed Card is set on each Story Card, not on the component. All three cards in the Framed Card example are framed.

- Card background is hard coded and not author-customisable, so Framed Card is the only card-level visual modifier demonstrated.

- Cards are reached through Card Sections, not directly. The component's Card Sections field points at Card Section items, and each Card Section holds its own Cards list and cards-per-row setting.

- The datasource template is brand-wide. A change to it reaches every brand.

- All modifier fields are Shared, so they are not per-language and cannot differ between language versions.

- No Personalization section on this template. Country-level show/hide needs the customPersonalization base added first.

- Accessibility: Card Link makes the whole card clickable. Combining it with per-card CTAs nests interactive elements. Use one or the other, not both.

3 cards per row; the remaining 2 wrap to a second row.

Use Tabs enabled; 3 tabs, 3 cards per tab. The four examples above all have Use Tabs off.

Framed Card is set on each card, not on the component. All three cards here are framed.

6 cards. Cards stack vertically on mobile by default; with this set they align horizontally and scroll left to right.

On Dark set on the component. Cards inherit the dark treatment; there is no card-level dark setting.

Compact is 24px top and bottom. The default is Comfortable at 72px, which every other example on this page uses.

Cozy is 48px top and bottom. The default is Comfortable at 72px, which every other example on this page uses.