Side by Side (sbs) with slot Block

Image Side by Side (sbs) with slot 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.¹

Military standard

MIL-STD 810H

Military standard

MIL-STD 810H

How to use Side by Side (sbs) with slot Block 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"
       >

<div slot="extraContent">a/sldk</div>
</SideBySideBlock>

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.¹

Optional additional text in a new paragraph

a/sldk

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"
    />