Hidden

Hidden is a utility feature that allows you to hide content based on the size of the user's screen/window.

Usage

ReactVanilla

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

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

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

ReactVanilla

<Hidden xs>Hidden on xs</Hidden>

<Hidden xs>Hidden on xs</Hidden>

<div class="swan-hidden-xs">Hidden on xs</div>
<!-- can be any tag, not just <div> -->

<div class="swan-hidden-xs">Hidden on xs</div>
<!-- can be any tag, not just <div> -->

Props

Hidden

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
xs	`boolean \| null`	false	Whether or not to hide the child content on xs screens	false
sm	`boolean \| null`	false	Whether or not to hide the child content on sm screens	false
md	`boolean \| null`	false	Whether or not to hide the child content on md screens	false
lg	`boolean \| null`	false	Whether or not to hide the child content on lg screens	false
xl	`boolean \| null`	false	Whether or not to hide the child content on xl screens	false

Usage

Props

Related