Component | Hidden

Develop

This text is hidden on Extra-Small screens

This text is hidden on Small screens

This text is hidden on Medium screens

This text is hidden on Large screens

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

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

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

Hidden

Related