Component | Visible

Develop

This text is visible only on Extra-Small screens

This text is visible only on Small screens

This text is visible only on Medium screens

This text is visible only on Large screens

<GridContainer>
  <Row>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible xs>This text is visible only on Extra-Small screens</Visible>
      </Card>
    </Column>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible sm>This text is visible only on Small screens</Visible>
      </Card>
    </Column>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible md>This text is visible only on Medium screens</Visible>
      </Card>
    </Column>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible lg>This text is visible only on Large screens</Visible>
      </Card>
    </Column>
  </Row>
</GridContainer><GridContainer>
  <Row>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible xs>This text is visible only on Extra-Small screens</Visible>
      </Card>
    </Column>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible sm>This text is visible only on Small screens</Visible>
      </Card>
    </Column>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible md>This text is visible only on Medium screens</Visible>
      </Card>
    </Column>
    <Column span="3">
      <Card bordered evenHeight>
        <Visible lg>This text is visible only on Large screens</Visible>
      </Card>
    </Column>
  </Row>
</GridContainer>

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

Hidden - a complementary component that allows you to hide content based on the size of the user's screen/window

Visible

Related