Hide

Hide displays a container that hides under a breakpoint.

Import

import { Hide } from "@prismane/core";

Usage

The Hide component will hide it's content, when the screen is bigger than the provided breakpoint. By default, the breakpoint prop has a value of base (1024px)

<Hide>Hidden over base (1024px) breakpoint!</Hide>

Custom breakpoint

<Hide breakpoint="2000px">Hidden over 2000px!</Hide>

Hide Sizes

<Stack direction="column" gap={fr(2)}>
  <Hide breakpoint="xs">Hidden over xs (640px) breakpoint!</Hide>
  <Hide breakpoint="sm">Hidden over sm (768px) breakpoint!</Hide>
  <Hide breakpoint="base">Hidden over base (1024px) breakpoint!</Hide>
  <Hide breakpoint="md">Hidden over md (1280px) breakpoint!</Hide>
  <Hide breakpoint="lg">Hidden over lg (1536px) breakpoint!</Hide>
</Stack>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Hide

Go BackHidden

Up NextHighlight