Visible

ReactVanilla

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

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

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

ReactVanilla

<Visible xs>Visible only on xs</Visible>

<Visible xs>Visible only on xs</Visible>

<div class="swan-visible-xs">Visible only on xs</div>
<!-- can be any tag, not just <div> -->

<div class="swan-visible-xs">Visible only on xs</div>
<!-- can be any tag, not just <div> -->

Props

Visible

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 the content should be visible on extra-small screens	false
sm	`boolean \| null`	false	Whether or not the content should be visible on small screens	false
md	`boolean \| null`	false	Whether or not the content should be visible on medium screens	false
lg	`boolean \| null`	false	Whether or not the content should be visible on large screens	false
xl	`boolean \| null`	false	Whether or not the content should be visible on extra-large screens	false

Props

Related