Mark

Highlighted text using the HTML mark element with intent variants.

Import

import { Mark } from '@oztix/roadie-components'

Examples

Default

The default intent is info.

<p>
  The Mark component is used to <Mark>highlight text</Mark> within content.
</p>

Intents

<div className='grid gap-2'>
  <p>
    This is <Mark intent='neutral'>neutral</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='neutral-inverted'>neutral-inverted</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='accent'>accent</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='brand'>brand</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='brand-secondary'>brand-secondary</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='info'>info</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='success'>success</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='warning'>warning</Mark> highlighted text.
  </p>
  <p>
    This is <Mark intent='danger'>danger</Mark> highlighted text.
  </p>
</div>
View code

As heading

Use render to draw Mark as a heading element. Padding automatically increases to suit display text.

<div className='grid gap-4 text-center'>
  <Mark render={<h2 />} intent='accent' className='text-display-ui-3'>
    Great events need great partners
  </Mark>
  <Mark render={<h3 />} intent='neutral' className='text-display-ui-5'>
    Not just great ticketing software
  </Mark>
  <Mark render={<h3 />} intent='brand-secondary' className='text-display-ui-5'>
    Built for the live events industry
  </Mark>
</div>
View code

With headings

Mark and Highlight can both be used inline within headings.

<div className='grid gap-2 text-center'>
  <h1 className='text-display-ui-3 text-strong'>
    Great events need great <Mark intent='accent'>partners</Mark>
  </h1>
  <h2 className='text-display-ui-5 text-subtle'>
    <Highlight text='Not just great ticketing software. Why?' query='great' intent='warning' />
  </h2>
</div>
View code