Visible

Visible

Show content based on the size of the user's screen/window.

styleKeys: visible

UsageAPI

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>

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.

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

Props

Related