Content Warnings

# Content Warnings

Notices are useful to display a banner, giving warnings or info about the content. You can also turn notices into prompts for readers to click confirm before continuing.

## Options

### `data-notice-type`

Required to create a notice. Can be `info` or `cw` (Content Warning).

### `data-notice-prompt`

Turn notice into prompt where readers have to click "I understand" to continue. Useful for strong content warnings.

## Example



<OissuSample
    code={`<blockquote data-notice-type="cw" data-notice-prompt="true">
    <h2>Content Warning!</h2>
    <p>
        Contains mentions of Tsumugi Aoba.
    </p>
</blockquote>
<figure>
    <img src="https://media.tumblr.com/path/to/img.png" />
</figure>
<p>
    <b>Tsumugi: </b>Thanks for celebrating my 
    birthday. No, I don't need anything material
    —Just your feelings make me really happy... ♪
</p>`}
    tler={
        <>
            <a href="https://fortunebanquet.tumblr.com/post/661350606636761088/tsumugis-birthday-eventopening-speech">
                Tsumugi’s Birthday Event
            </a>{" "}
            translation by <a href="https://fortunebanquet.tumblr.com/">fortunebanquet</a>
        </>
    }
>
    <div>
        <div className="oissu">
            <blockquote data-notice-type="cw" data-notice-prompt="true">
                <h2>Content Warning!</h2>
                <p>Contains mentions of Tsumugi Aoba.</p>
            </blockquote>
            <figure>
                <img src="/docs/images/fortunebanquet2.png" />
            </figure>
            <p>
                <b>Tsumugi: </b>Thanks for celebrating my birthday. No, I don't
                need anything material —Just your feelings make me really
                happy... ♪
            </p>
        </div>
    </div>
</OissuSample>