Info Module Content Warning

Link to article: Info Module Content Warning.

table.wiki-content-table td { text-align: center; border-color: #ddd; padding: 0.7em; }
table.wiki-content-table td img { padding: 4px; }

/* Shift the content warning into position beneath the info button */
.content-warning {
  transform: translate(12px, -5px);
}

.content-warning-arrow {
  /* https://phosphoricons.com, licensed MIT */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='128 96 176 48 224 96' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3Cpolyline points='32 192 176 192 176 48' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E");

  display: inline-block;
  width: 32px;
  transform: translateY(-3px);
  margin-left: 0.3ch;

  background-color: currentColor;
  -webkit-mask-size: 16px;
  mask-size: 16px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-image: var(--arrow);
  mask-image: var(--arrow);
}

/* Theme compatibility */

:where(:root:has(iframe[src*='black-highlighter'])) .content-warning {
  transform: translate(0.7em, -0.5em);
}
:where(:root:has(iframe[src*='black-highlighter'])) .content-warning-arrow {
  transform: translateY(-1px);
}

:where(:root:has(iframe[src*='basalt/basalt-bedrock'])) #page-content .content-warning {
  transform: translate(0.3em, -0.1em);
}
:where(:root:has(iframe[src*='basalt/basalt-bedrock'])) .content-warning-arrow {
  transform: translateY(-1px);
}

```
border: 1px solid #ddd; padding: 1em;
```

:scp-wiki:component:croqstyle [info]

```
code
```
```
code
```
```
content-warning
```
```
creditRate
```
```
content-warning-arrow
```

[[iftags +component]]

[[>]]
[[module Rate]]
[[/>]]

[[include :scp-wiki:component:croqstyle]]

[[div style="border: 1px solid #ddd; padding: 1em;"]]

[[module CSS]]
table.wiki-content-table td { text-align: center; border-color: #ddd; padding: 0.7em; }
table.wiki-content-table td img { padding: 4px; }
[[/module]]

|| [[image info-cw-sigma-light.png]] _
[[[component:theme | Sigma-10]]] || [[image info-cw-sigma-dark.png]] _
[[[theme:dark|]]] ||
|| [[image info-cw-bhl-light.png]] _
[[[theme:black-highlighter-theme|]]] || [[image info-cw-bhl-dark.png]] _
[[[theme:extra-black-highlighter-theme|]]] ||
|| [[image info-cw-basalt-light.png]] _
[[[theme:basalt|]]] || [[image info-cw-basalt-dark.png]] _
[[[theme:basalt|]]] dark mode ||

This is a component that adds a little unobtrusive content warning notification. It is designed to sit underneath the [[[info:start | Info module]]] in such a way that the little arrow points to the little info button.

All it does is direct attention to the Info module, where you will have written your content warning.

Readers who would prefer a content warning have the option of reading it. Readers who would prefer to read without the spoiler of the content warning can ignore it. All readers are aware that there is a content warning, though, and that's what matters.

If you'd prefer that all of your readers are made to read the content warning, then you should not use this component. Put a content warning in the article itself instead.

Please note that authors are not obligated to provide content warnings for their work, but if you choose to do so, this hopefully makes it a little easier.

There's no guarantee that this will work nicely with any given theme (except Sigma-9 and BHL); if it doesn't, bug the theme creator about it.

+ Usage

Include this component just below the [[[info:start | Info module]]]:

[[div class="code"]]
**@@[[include :scp-wiki:info:start]]@@**
Info about the article
⚠️ @@**Content warning:**@@ This article contains a content warning
**@@[[include :scp-wiki:info:end]]@@**

**@@[[include :scp-wiki:component:info-cw]]@@**
[[/div]]

This component intentionally comes with no built-in customisation options, as it's supposed to be serious and out-of-universe, and being consistent across articles helps with that.

If you'd like to use this with the [[[component:info-ayers|]]] by [[*user Ayers]], I recommend just using some simple centre-aligned text instead:

[[div class="code"]]
@@=@@ ⚠️ content warning @<&uarr;>@
[[/div]]

[[/div]]
[[/iftags]]

[[module CSS]]
/* Shift the content warning into position beneath the info button */
.content-warning {
  transform: translate(12px, -5px);
}

.content-warning-arrow {
  /* https://phosphoricons.com, licensed MIT */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='128 96 176 48 224 96' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3Cpolyline points='32 192 176 192 176 48' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E");

  display: inline-block;
  width: 32px;
  transform: translateY(-3px);
  margin-left: 0.3ch;

  background-color: currentColor;
  -webkit-mask-size: 16px;
  mask-size: 16px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-image: var(--arrow);
  mask-image: var(--arrow);
}

/* Theme compatibility */

:where(:root:has(iframe[src*='black-highlighter'])) .content-warning {
  transform: translate(0.7em, -0.5em);
}
:where(:root:has(iframe[src*='black-highlighter'])) .content-warning-arrow {
  transform: translateY(-1px);
}

:where(:root:has(iframe[src*='basalt/basalt-bedrock'])) #page-content .content-warning {
  transform: translate(0.3em, -0.1em);
}
:where(:root:has(iframe[src*='basalt/basalt-bedrock'])) .content-warning-arrow {
  transform: translateY(-1px);
}
[[/module]]

[[div_ class="content-warning creditRate"]]
⚠️ content warning [[span class="content-warning-arrow"]]@@ @@[[/span]]
[[/div]]

Info Module Content Warning

Module Styles

Inline Styles

Includes

CSS Classes

Page Source