Hide at Breakpoint

import React from 'react';

import { Card, CardBody, HideAtBreakpoint, magma } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <HideAtBreakpoint maxWidth={599}>
        <Card isInverse background={magma.colors.primary700}>
          <CardBody>
            <strong>Max-Width:</strong> This text will be visible when the
            browser width is greater than or equal to 600px.
          </CardBody>
        </Card>
        <br />
      </HideAtBreakpoint>
      <HideAtBreakpoint minWidth={600} background={magma.colors.info}>
        <Card isInverse background={magma.colors.success}>
          <CardBody>
            <strong>Min-Width:</strong> This text will be visible when the
            browser width is less than 600px.
          </CardBody>
        </Card>
        <br />
      </HideAtBreakpoint>
      <HideAtBreakpoint>
        <Card isInverse background={magma.colors.success}>
          <CardBody>This text will always be visible.</CardBody>
        </Card>
      </HideAtBreakpoint>
    </>
  );
}