Skip to content
SRP Toolkit
v v1.8.0

Side by Side (sbs) Block

Image Side by Side (sbs) Block component at the top of a river page displaying main product.

Preview

Monitor Energy Score to crush your goals
Discover your body's potential with Energy Score. Galaxy AI analyses key indicators of your overall condition and gives you a daily score.1
Optional additional text in a new paragraph
A view of the Galaxy Watch Ultra face with health feature highlights around it.

How to use Side by Side (sbs) Block in Astro

Section titled “How to use in Astro”

Images for this component are exported from the Figma design files as a png at 1.5x.

index.astro
    ---
    import {SideBySideBlock} from "@isitetv/srp-toolkit";
    ---


    <SideBySideBlock
        heading="<strong>Monitor Energy Score</strong> to crush your goals"
        bodyCopy="Discover your body's potential with <strong>Energy Score</strong>. Galaxy AI analyses key indicators of your overall condition and gives you a daily score.<sup class='srp-footnote'>1</sup>"
        imageUrl="https://static.isitetv.com/clients/isite/samsung-component-library/docs/monitor-energy.png"
        imageAlt="A view of the Galaxy Watch Ultra face with health feature highlights around it."
        imageWidth="576"
    />

Reversed layout with centered text

Preview

Monitor Energy Score to crush your goals
Discover your body's potential with Energy Score. Galaxy AI analyses key indicators of your overall condition and gives you a daily score.1
Optional additional text in a new paragraph
A view of the Galaxy Watch Ultra face with health feature highlights around it.
index.astro
    ---
    import {SideBySideBlock} from "@isitetv/srp-toolkit";
    ---


    <SideBySideBlock
        heading="<strong>Monitor Energy Score</strong> to crush your goals"
        bodyCopy="Discover your body's potential with <strong>Energy Score</strong>. Galaxy AI analyses key indicators of your overall condition and gives you a daily score.<sup class='srp-footnote'>1</sup>"
        imageUrl="https://static.isitetv.com/clients/isite/samsung-component-library/docs/monitor-energy.png"
        imageAlt="A view of the Galaxy Watch Ultra face with health feature highlights around it."
        imageWidth="576"
        reverseLayout
        centerBodyText
        bodyCopyExtra="Optional additional text in a new paragraph"
    />