Highlight

Highlight displays a container that highlights it's content.

Import

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

<Text>
  You can <Highlight>highlight</Highlight> this important content!
</Text>

You can change the background color of the Highlight component, by providing a value to the bg prop.

<Text>
  You can <Highlight bg="lime">highlight</Highlight> this important content!
</Text>

You can change the text color of the Highlight component, by providing a value to the cl prop.

<Text>
  You can <Highlight cl="lime">highlight</Highlight> this important content!
</Text>

You can change the border radius of the Highlight component, by providing a value to the br prop.

<Text>
  You can <Highlight br="full">highlight</Highlight> this important content!
</Text>

By providing a mix of custom properties you can fully customize the Highlight component.

<Text>
  You can{" "}
  <Highlight br="full" bg="teal" mx={fr(2)}>
    highlight
  </Highlight>{" "}
  this important content!
</Text>

<Text>
  You can <Highlight as="strong">highlight</Highlight> this important content!
</Text>

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