Mark

A mark element for highlighting or emphasizing text inline with customizable styling variants.

Anatomy 

<script>
  import { Mark } from "@saas-ui/svelte/typography/mark";
</script>

<!-- Basic mark -->
<p>This is <Mark>highlighted</Mark> text.</p>

<!-- With variant -->
<p>This is <Mark variant="solid" colour="blue">important</Mark> text.</p>

<!-- Text style -->
<p>This is <Mark variant="text" colour="red">emphasized</Mark> text.</p>

Examples

Basic Accessibility

Basic mark with default styling for highlighting text inline.

Variants Accessibility

Use the variant prop to change the visual style. Available variants: subtle, solid, text, plain.

Props

Prop Type Default Description
variant subtle | solid | text | plain subtle -
colour accent | gray | zinc | neutral | stone | slate | red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose gray The colour theme of the component.
children any - The content to be rendered inside the component.
class text - Additional CSS classes to apply.