Hidden is a utility feature that allows you to hide content based on the size of the user's screen/window.
Usage
The preview has been updated.
<GridContainer><Row><Column span={2}><Card bordered evenHeight><Hidden xs>This text is hidden on Extra-Small screens</Hidden></Card></Column><Column span={2}><Card bordered evenHeight><Hidden sm>This text is hidden on Small screens</Hidden></Card></Column><Column span={2}><Card bordered evenHeight><Hidden md>This text is hidden on Medium screens</Hidden></Card></Column><Column span={2}><Card bordered evenHeight><Hidden lg>This text is hidden on Large screens</Hidden></Card></Column><Column span={2}><Card bordered evenHeight><Hidden xl>This text is hidden on Extra Large screens</Hidden></Card></Column></Row></GridContainer>
<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-hidden-xs">This text is hidden 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-hidden-sm">This text is hidden 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-hidden-md">This text is hidden 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-hidden-lg">This text is hidden 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-hidden-xl">This text is hidden on Extra Large screens</div></div></div></div></div>
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.
<Hidden xs>Hidden on xs</Hidden>
<div class="swan-hidden-xs">Hidden on xs</div><!-- can be any tag, not just <div> -->
