The preview has been updated.
<><GridContainer><Row><Column span={2}><Card bordered evenHeight><Visible xs>This text is visible only on Extra-Small screens</Visible></Card></Column><Column span={2}><Card bordered evenHeight><Visible sm>This text is visible only on Small screens</Visible></Card></Column><Column span={2}><Card bordered evenHeight><Visible md>This text is visible only on Medium screens</Visible></Card></Column><Column span={2}><Card bordered evenHeight><Visible lg>This text is visible only on Large screens</Visible></Card></Column><Column span={2}><Card bordered evenHeight><Visible xl>This text is visible only on Extra Large screens</Visible></Card></Column></Row></GridContainer><P>Upscale or downscale the screen width to see the effect</P></>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-2"><div class="swan-card swan-card-bordered swan-card-even-height"><div class="swan-visible-xs">This text is visible only on Extra-Small screens</div></div></div><div class="swan-col-2"><div class="swan-card swan-card-bordered swan-card-even-height"><div class="swan-visible-sm">This text is visible only on Small screens</div></div></div><div class="swan-col-2"><div class="swan-card swan-card-bordered swan-card-even-height"><div class="swan-visible-md">This text is visible only on Medium screens</div></div></div><div class="swan-col-2"><div class="swan-card swan-card-bordered swan-card-even-height"><div class="swan-visible-lg">This text is visible only on Large screens</div></div></div><div class="swan-col-2"><div class="swan-card swan-card-bordered swan-card-even-height"><div class="swan-visible-xl">This text is visible only on Extra Large screens</div></div></div></div></div><p>Upscale or downscale the screen width to see the effect</p>
Different props can be used to adjust visibility at Responsive System breakpoints, for example xs and lg. These overrides do not cascade to other breakpoints.
<Visible xs>Visible only on xs</Visible>
<div class="swan-visible-xs">Visible only on xs</div><!-- can be any tag, not just <div> -->
