Reasons to Believe - React
import { ReasonsToBelieve } from '@sky-uk/ui-sections';
Example
The ReasonsToBelieve section features a list of predfined RTBs supporting icons or images.
function Example() { const content = { data: { testId: 'testId', contentId: 'contentId' }, header: { headline: 'This week on Sky Sports', }, body: 'This weekend watch the final of the U.S Open, the third and final cricket Test match between England and Sri Lanka, and have a late night to catch the NFL in action.', items: [ { title: 'U.S Open', body: 'The final of the U.S Open is here. Who will take the title?', icon: { color: 'grey50', src: tickCircleSolid }, cta: { text: 'Watch now', href: 'https://www.sky.com', data: { trackingDescription: 'tracking description', trackingLabel: 'tracking label' } } }, { title: 'England vs Sri Lanka', body: 'The third and final cricket Test match between England and Sri Lanka is here.', image: { src: 'https://placehold.co/40x40/webp' } }, { title: 'NFL', body: 'Catch the NFL in action this weekend.', icon: { src: tickCircleSolid }, cta: { text: 'Watch now', href: 'https://www.sky.com', target: '_blank', data: { trackingDescription: 'tracking description', trackingLabel: 'tracking label' } } }, { title: 'England vs Sri Lanka', body: 'The third and final cricket Test match between England and Sri Lanka is here.', image: { src: 'https://placehold.co/40x40/webp' } } ] } return ( <> <ReasonsToBelieve {...content} /> </> ); }
Props
Props marked with ? are optional. Sections or section elements that do not provide the required props will not render.
The data prop support key/value pairs that are rendered as kebab case data attributes on the component.
- $animated?:
booleandefaults tofalse - $appearance?:
string(default|light) - background?:
object - data?:
object - header
- body?:
string - headline:
string - headlineLevel?:
string(h1|h2|h3); - overline?:
string|Image; - textCta?:
object- text:
string - href?:
string - data?:
object - onClick?:
function - target?:
string
- text:
- primaryCta?:
object- text:
string - href?:
string - data?:
object - onClick?:
function - target?:
string
- text:
- secondaryCta?:
object- text:
string - href?:
string - data?:
object - onClick?:
function - target?:
string
- text:
- body?:
- items:
array- body?:
string - cta?:
object- text?:
string - href?:
string - data?:
object - onClick?:
function - target?:
string
- text?:
- title:
string - image?:
object- src:
string - $size?:
string(default|large)
- src:
- icon?:
object- color?:
Color(color) - src:
string(image|icon)
- color?:
- body?: