Components Gen2

Link to article: Components Gen2.

@import url('https://fonts.googleapis.com/css?family=Gochi+Hand|Source+Sans+Pro&display=swap');

.rmpostcontainer
{
    background-image: url('http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueDesk.png');
    background-repeat: no-repeat;
    width: 100%; max-width: 660px;
    height: 980px;
    margin: 0px;
        padding: 60px 20px 0px 60px;
}

.rmpostcontent
{
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 1.30em;
    color: #000;
    width: 530px;
    height: 880px;
    padding: 30px;
    margin: 0px;
    margin-top: -8px;
}

.rmpostmobiletitle
{
    display: none;
}

.scribble
{
    font-style: bold;
    font-size: 1.30em;
    color: #000;
    width: 300px;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    margin-top: -8px;
    -ms-transform: rotate(20deg); /* IE 9 */
    transform: rotate(12deg); /* Standard syntax */
}

@media only screen and (max-width: 600px) {

    .rmpostcontainer {
        background-image: url("http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueMobile.png");
        background-size: 100%;
        background-repeat: repeat;
        width: 100%;
        height: auto;
        padding: 0px;
        padding-top: 0px;
    }

    .rmpostcontent {
        font-size: 14pt;
        width: 85%;
        height: auto;
        padding: 10px 10px 0px 30px;
    }

    .rmposttitle {
        width: auto;
        height: auto;
        padding: 0px 20px 0px 70px;
    }

}

(none)

```
inline-colmod
```
```
inline-colmod
```
```
rmpostcontainer
```
```
rmposttitle
```
```
rmpostmobiletitle
```
```
rmpostcontent
```
```
rmpostcontainer
```
```
rmposttitle
```
```
rmpostmobiletitle
```
```
rmpostcontent
```
```
text-container-wrap
```
```
text-container
```
```
sent
```
```
text
```
```
recv
```
```
text
```
```
text
```
```
sent
```
```
text
```
```
text
```
```
text
```
```
recv
```
```
text
```
```
text
```
```
sent
```
```
text
```
```
text
```
```
recv
```
```
text
```
```
text
```
```
sent
```
```
text
```
```
text
```
```
recv
```
```
text
```
```
sent
```
```
text
```
```
text-container-wrap
```
```
text-container
```
```
sent/recv
```
```
text
```
```
sent/recv
```
```
text
```
```
text
```
```
vactivity
```
```
vactivity
```

[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:id-card | ID Cards]]]
----
[[/=]]
This component allows you to make decorative ID cards.

[[include :scp-wiki:component:id-card |css=--
|photo=https://scp-wiki.wdfiles.com/local--files/main/logo_white.png
|level=5 
|name=Standard Chartered Personnel
|dept=of Containment |position=not a O5
|id-number= dQw4w9WgXcQ
|expiry=FOREVER
]]

> @@[[include :scp-wiki:component:id-card |css=--@@
> |photo=Image URL
> |level=1-5
> |name=
> |dept= 
> |position=
> |id-number=
> |expiry=
> @@]]@@

If multiple cards are placed on one page, you only need the {{css}} parameter once, and can otherwise be omitted on subsequent {{[[include]]}}s.
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:image-block | Image Blocks]]]
----
[[/=]]

[[include :scp-wiki:component:image-block name=https://scp-wiki.wdfiles.com/local--files/scp-4273/dcalfine.jpg|caption=PoI-0007-A surveillance photo. c. 2018|width=300px]]
@@ @@
@@ @@
@@ @@
@@ @@

This component allows you to insert photos with captions into your pages. To use it, paste the following:

> @@[[include :scp-wiki:component:image-block name=filename/url|caption=content|width=###px]]@@

There are a couple of alternatives to Image Block, which can be found below:

++++ [[size 125%]]📎[[/size]][[[component:image-block-peppo | Image Block Peppo]]]

[[=image http://lspr.wikidot.com/local--files/components-hub/imagepeppo.png]]

This component automatically aligns the right side of the block to the flush edge instead of to the rating module, as well as formatting images if the reader is on mobile. To use it, paste the following:

> @@[[include :scp-wiki:component:image-block-peppo@@
> |name=file url
> |caption=caption
> |width=###px (300px is recommended)
> ]]

++++ [[size 125%]]📎[[/size]][[[component:image-block-quoted | Image Block Quoted]]]

[[=image http://lspr.wikidot.com/local--files/components-hub/imagequoted.png]]

This component allows the image to serve as a link. To use it, paste the following:

> @@[[include :scp-wiki:component:image-block-quoted name=file|caption=text|link=link|width=300px]]@@

++++ [[size 125%]]📎[[/size]][[[component:sp-image | SunnyParallax Image Block]]]

[[=image http://lspr.wikidot.com/local--files/components-hub/imagesunny.png]]

This component is mostly used by [[*user SunnyClockwork]]. It automatically puts the image in a collapsible and sets the caption as a title before it. As such, it's incredibly useful for displaying large amounts of artwork on a single page. To use it, paste the following:

> @@[[include :scp-wiki:component:sp-image caption=caption|src=file url|width=###]]@@

++++ [[size 125%]]📎[[/size]][[[component:wide-image-sizer | Wide Image Sizer]]]
**With component:**

[[=image https://scp-wiki.wdfiles.com/local--files/component:wide-image-sizer/with-component.png]]

**Without component:**

[[=image https://scp-wiki.wdfiles.com/local--files/component:wide-image-sizer/without-component.png]]

This component scales a wide image to a 215px height and appropriate width. This allows you to have a wide image as a header without having to precisely crop the image.

To use it, paste this at the top of your page:

> @@[[include :scp-wiki:component:wide-image-sizer]]@@

Then for the image paste the following:

> @@[[include :scp-wiki:component:image-block@@
>     name=https://scp-wiki.wdfiles.com/local--files/(REST OF LINK TO YOUR IMAGE) |
>     caption=(YOUR CAPTION HERE) |
>     align=center |
>     width=100%
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:carousel | Image Carousel]]]
----
[[/=]]

This component allows you to cycle through different images in just one single image block. To use it, paste the following:

> @@[[include :scp-wiki:component:carousel@@
> | images=photograph.png,old-map.png,jumpscare.gif
> | caption=A selection of images.
> | interval=5
> | wiki=scp-wiki
> | page=SCP-173
> | width=300px
> | height=240px
> | position=right
> | no-caption=false
> | background=white
> | options=yes
> ]]

Further information on what each field in the component does can be found on its component page.

You can see this component in action in [[[SCP-5800]]].

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:image-features | Image Features]]]
----
[[/=]]

This component allows you to modify Image Blocks with a wide range of features.

**Hover Blur** blurs an image until it is hovered over or tapped. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |blur-reveal=--]@@
> |blur-amount=Number
> |speed=Number
> |float=true/false
> |align=left/right
> |width=px/rem/vw/%
> |url=url
> |add-caption=true/false
> |caption=text
> ]]

**Hover Blur Change** changes the image shown when it is hoverd over or tapped. It works best when both images have the same width to height ratio. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |image-change=--]@@
> |blur-amount=Number
> |speed=Number
> |float=true/false
> |align=left/right
> |width=px/rem/vw/%
> |start-url=url
> |hover-url=url
> |add-caption=true/false
> |caption=text
> ]]

**Hover Slide Blur** will remove the blur from an image by sliding it away fromdirection chosen. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |slide-blur-reveal=--]@@
> |blur-amount=Number
> |slide-direction=left/right/top/bottom
> |float=true/false
> |align=left/right
> |speed=Number
> |width=px/rem/vw/%
> |url=url
> |add-caption=true/false
> |caption=text
> ]]

**Hover Slide Block** will remove a black-box over the image by sliding it. To use, paste the following:

> @@[[include :scp-wiki:component:image-features-source |slide-block-reveal=--]@@
> |block-color=hex/rgb/hsl
> |slide-direction=left/right/top/bottom
> |speed=Number
> |float=true/false
> |align=left/right
> |width=px/rem/vw/%
> |url=url
> |add-caption=true/false
> |caption=text
> ]]

**Slide Image Revealer** changes the image with a user-controlled slider. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |slide-revealer=--]@@
> |block-color=hex/rgb/hsl
> |float=true/false
> |align=left/right
> |width=px/rem/vw/%
> |left-url=url
> |right-url=url
> |slider-start-percent=0-100
> |slider-color=hex/rgb/hsl
> |slider-circle-size=px/rem/vw/%
> |add-caption=true/false
> |caption=text
> ]]

**Hover Fractal Noise Reveal** removes a fractal effect on an image to reveal it. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |noise-reveal=--]@@
> |fractal-size=1-999
> |speed=Number
> |float=true/false
> |align=left/right
> |width=px/rem
> |background=color/url("")/gradient
> |url=url
> |add-caption=true/false
> |caption=text
> ]]

**Hover Pixelate Reveal** removes a pixelation effect on an image to reveal it. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |pixel-reveal=--]@@
> |pixel-res=Number
> |speed=Number
> |float=true/false
> |align=left/right
> |width=px/rem
> |url=url
> |add-caption=true/false
> |caption=text
> ]]

**Hover Enlarge** enlarges an image when it is hovered over or tapped. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |hover-enlarge=--]@@
> |enlarge-amount=Number
> |speed=Number
> |float=true/false
> |align=left/right
> |width=px/rem/vw/%
> |url=url
> |add-caption=true/false
> |caption=text
> ]]

**Click & Hold Fullscreen** increases an image to be fullscreen, with its caption at the bottom. To use it, paste the following:

> @@[[include :scp-wiki:component:image-features-source |click-fullscreen=--]@@
> |speed=Number
> |float=true/false
> |align=left/right
> |width=px/rem/vw/%
> |url=url
> |add-caption=true/false
> |caption=text
> ]]

Examples of all of these can be found on the component's page.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:info-ayers | Info Bar]]]
----
[[/=]]
This is the collapsible info bar. To use it, copy and paste the following:

> @@[[include :scp-wiki:component:info-ayers@@
> @@|lang=en@@
> @@|page=component:info-ayers@@
> @@|authorPage= Link here@@
> @@|comments=Look at me! I'm an info module! Yay!@@
> @@]]@@

You can see an example of this component on its component page.
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[info:start | Info Rating Module]]]
----
[[/=]]

[[include :scp-wiki:info:start]]
Info about the page
[[include :scp-wiki:info:more]]
Even more info
[[include :scp-wiki:info:end]]

This component is a info button, next to your rating module which shows the authors, and other information. To use it, copy and paste the following:

> @@[[include :scp-wiki:info:start]]@@
> @@**SCP-XXXX:** TITLE@@
> @@**NAME OF TALE/GOI-FORMAT**@@
> @@**Author:** [[*user AUTHOR]]@@
> @@**Original:** LINK TO ORIGINAL@@
> @@**Translator:** [[*user TRANSLATOR]]@@
> @@**Image:** Put any licensing information for images here@@
> @@Add anything else you'd like the reader to know@@
> @@[[include :scp-wiki:info:more]]@@
> @@More, optional info that appears in a new window. Remove the "[[include :scp-wiki:info:more]]" if you > don't want this@@
> @@[[include :scp-wiki:info:end]]@@

[[include :scp-wiki:info:start-standalone]]
Info about the page
[[include :scp-wiki:info:more-standalone]]
Even more info
[[include :scp-wiki:info:end-standalone]]

If your article does not have a rating module, then use the following [[include]] instead of the ones above.

> @@[[include :scp-wiki:info:start-standalone]]@@
> @@[[include :scp-wiki:info:more-standalone]]@@
> @@[[include :scp-wiki:info:end-standalone]]@@

++++ [[size 125%]]📎[[/size]][[[component:info-cw | Info Module Content Warning]]]

[[include :scp-wiki:info:start]]
Warning Content
[[include :scp-wiki:info:end]]
[[include :scp-wiki:component:info-cw]]

If the article calls for it, you can also add a component that lets readers know that this page has a content warning. To use it, paste the following under your Info Module:

> @@[[include :scp-wiki:component:info-cw]]@@

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:inline-colmod | Inline Collapsible Block Module]]]
----
[[/=]]

This component allows you to have in-line collapsibles on pages. To use it, paste the following on your page:

> @@[[div class="inline-colmod"]]@@
> @@Text before collapsible block@@
> @@[[include :scp-wiki:component:inline-colmod show=Text displayed before clicking | content=Text displayed after clicking]]@@
> @@Text after collapsible block@@
> @@[[/div]]@@

[[div class="inline-colmod"]]
Make sure that the actual [[include]] is on a separate line from what comes before and after it.
[[include :scp-wiki:component:inline-colmod show=If done correctly... | content=It should look something like this!]]
Ain't that neat?
[[/div]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:laruepost | La Rue Macabre Format]]]
----
[[/=]]

[[div class="rmpostcontainer"]]
@@ @@
@@ @@
[[div class="rmposttitle"]]
[[image https://scp-wiki.wdfiles.com/local--files/component:laruepost/LaRueTitle.png]]
[[/div]]
[[div class="rmpostmobiletitle"]]
La Rue Macabre
[[/div]]
[[div class="rmpostcontent"]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis lorem et justo hendrerit posuere. Donec in massa in eros hendrerit luctus. Aliquam condimentum sapien sed mauris condimentum, at porttitor metus ultricies. Cras vulputate aliquet lacus, ac aliquam felis ornare id. Quisque suscipit vel felis sed finibus. Vivamus fringilla lacus sed ligula egestas, vitae tincidunt nulla aliquam. Donec pulvinar enim fermentum magna gravida volutpat. Sed elementum interdum ex, ut maximus massa condimentum sed. Morbi nisi eros, aliquet et nisi vel, lacinia fermentum massa. Curabitur scelerisque mauris justo, in vulputate arcu imperdiet eget.

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

This component enables you to use a special div for your la Rue Macabre GoI Formats. To use it, paste the following at the top of your page:

[[code]]
[[module css]]
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand|Source+Sans+Pro&display=swap');

.rmpostcontainer
{
    background-image: url('http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueDesk.png');
    background-repeat: no-repeat;
    width: 100%; max-width: 660px;
    height: 980px;
    margin: 0px;
        padding: 60px 20px 0px 60px;
}

.rmpostcontent
{
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 1.30em;
    color: #000;
    width: 530px;
    height: 880px;
    padding: 30px;
    margin: 0px;
    margin-top: -8px;
}

.rmpostmobiletitle
{
    display: none;
}

.scribble
{
    font-style: bold;
    font-size: 1.30em;
    color: #000;
    width: 300px;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    margin-top: -8px;
    -ms-transform: rotate(20deg); /* IE 9 */
    transform: rotate(12deg); /* Standard syntax */
}

@media only screen and (max-width: 600px) {

    .rmpostcontainer {
        background-image: url("http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueMobile.png");
        background-size: 100%;
        background-repeat: repeat;
        width: 100%;
        height: auto;
        padding: 0px;
        padding-top: 0px;
    }

    .rmpostcontent {
        font-size: 14pt;
        width: 85%;
        height: auto;
        padding: 10px 10px 0px 30px;
    }

    .rmposttitle {
        width: auto;
        height: auto;
        padding: 0px 20px 0px 70px;
    }

}

[[/module]]
[[/code]]

Then, for every page you want to be on the page, paste the following:

[[code]]
[[div class="rmpostcontainer"]]
@@ @@
@@ @@
[[div class="rmposttitle"]]
[[image https://scp-wiki.wdfiles.com/local--files/component:laruepost/LaRueTitle.png]]
[[/div]]
[[div class="rmpostmobiletitle"]]
La Rue Macabre
[[/div]]
[[div class="rmpostcontent"
]]
content
[[/div]]
[[/div]]
[[/code]]

You can exclude the @@[[div]]@@s for the title if this isn't the first La Rue page on the page.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:mapping | Mapping Component]]]
----
[[/=]]
This component allows you to create an interactive map.

For instructions on how to use this component, please refer to its component page.

You can see this component in action on [[[secure-facilities-locations|Foundation Facilities]]].
@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:mega-cool-author-page-tool | Mega Cool Author Page Tool Ver. 1.3.0]]]
----
[[/=]]

This component automatically updates your page, and offers support for international and co-authored pages. To use it, paste the following:

> @@[[include :scp-wiki:component:mega-cool-author-page-tool |inc-list= --]@@
> |language= en/ru/ko/cn/fr/pl/es/th/jp/de/it/ua
> |order= name/title/rating/created_at
> |perpage= 1-250
> |background-image= url
> |shadow= yes/no
> ]]

For co-authored pages that you didn't post, do the following:

> @@[[include :scp-wiki:component:mega-cool-author-page-tool |inc-coauthor-header= --]]]@@

> [[include :scp-wiki:component:mega-cool-author-page-tool |inc-coauthored= --]
> |name= slug (this page's slug would be components-hub
> |feat= co-authors
> |language= en/ru/ko/cn/fr/pl/es/th/jp/de/it/ua
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:customizable-acs | Mega Cool Customizable ACS Add-On Ver. 1.8.0]]]
----
[[/=]]

This component allows you to customize practically the entirety of the ACS Component. With the exception of the last option, paste these after your include for ACS.

Please refer to [[[component:customizable-acs-guide|this guide]]] for usage instructions.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:colstyle | Nested Collapsibles]]]
----
[[/=]]

This component allows you to nest collapsibles within each other. To use it, paste the following as your first level of collapsibles:

> @@[[include :scp-wiki:component:coltop@@
> | show=+ show block
> | hide=- hide block
> ]]
> Text to show inside the collapsible
> [[include :scp-wiki:component:colend]]

Paste this again within itself to nest them.

[[include :scp-wiki:component:coltop
| show=+ If done correctly
| hide=- it should look something like this!
]]
[[include :scp-wiki:component:coltop
| show=+ Then you paste it inside of itself
| hide=- To get this!
]]
Ain't that neat?
[[include :scp-wiki:component:colend]]
[[include :scp-wiki:component:colend]]
@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:object-class-bar | Object Class Bar]]]
----
[[/=]]

[[include :scp-wiki:component:object-class-bar-source
|item-num=4444
|obj-class=Esoteric Class Ticonderoga
|site-resp=USMILA Site-19
|director=Tilda Moose
|rsch-head=K. P. Crow
|task-force=N/A
|colorbar-bg-color=rgb(0,0,0)
|colorbar-bg-img=optional
|colorbar-one=full
|colorbar-two=full
|colorbar-three=full
|colorbar-four=full
|colorbar-five=half
|colorbar-six=none
|level=4
|secrecy=Classified
]]

This component serves as a header for your page. To use it, paste the following at the top of your page:

> @@[[include :scp-wiki:component:object-class-bar-source@@
> |item-num=XXXX
> |obj-classobject_class
> |site-resp=Site/Area-##
> |director=name
> |rsch-head=name
> |task-force= MTF [NAME]-## ("[CODENAME]")
> |colorbar-bg-color=rgb(0,0,0)
> |colorbar-bg-img=optional
> |colorbar-one=full/half/none
> |colorbar-two=full/half/none
> |colorbar-three=full/half/none
> |colorbar-four=full/half/none
> |colorbar-five=full/half/none
> |colorbar-six=full/half/none
> |level=1/2/3/4/5/6
> |secrecy=unrestricted/restricted/classified/secret/top-secret/other
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:object-warning-box | Object Warning Box]]]
----
[[/=]]

[[include :scp-wiki:component:object-warning-box-source
|bg-image=https://scp-wiki.wdfiles.com/local--files/component:object-warning-box-source/scp-logo.svg
|bg-opacity=0.15
|bg-size=105% 105%
|text-top=BY ORDER OF THE OVERSEER COUNCIL
|text-bottom=The following file is Level 4/2935 Classified
**Unauthorized access is forbidden.**
|object-number=2935
]]

This component allows you to add an in-universe warning box to your page. To use it, paste the following:

> @@[[include :scp-wiki:component:object-warning-box-source@@
> |bg-image=https://thisisaurl.com
> |bg-opacity=0.15
> |bg-size=105% 105%
> |text-top=BY ORDER OF THE OVERSEER COUNCIL
> |text-bottom=The following file is Level #/XXXX Classified
> **Unauthorized access is forbidden.**
> |object-number=XXXX
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:chicago-spirit | Old Timey Chicago Spirit Tabs]]]
----
[[/=]]

[[collapsible show="SHOW EXAMPLE" hide="HIDE EXAMPLE"]]
[[tabview]]
[[tab Empty Tab]]
[[/tab]]
[[tab Another Empty Tab]]
i lied
[[/tab]]
[[tab Long-ish Name]]
[[/tab]]
[[tab Tab with text]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci non tortor aliquam commodo. Vivamus faucibus nibh sapien, vel imperdiet dolor semper et. Quisque auctor ornare lorem quis semper. Aliquam non orci imperdiet, vestibulum ligula fringilla, congue ante. Nam vitae odio a massa rutrum vestibulum. Integer tristique dui vitae porttitor porta. Vestibulum venenatis, sapien non egestas euismod, dolor metus cursus est, et blandit lacus mi sed neque. Pellentesque luctus nec tellus sed tempor. In fringilla mi sed bibendum efficitur. Duis quis tortor neque. In vitae porttitor tortor, sed fringilla nibh. Fusce vel est sed ipsum maximus accumsan vitae eget quam. Praesent molestie eros in sem convallis, ut interdum enim varius. Phasellus vel nibh finibus, eleifend est at, luctus ipsum. Vivamus vel porta augue.

Nunc lorem turpis, accumsan vel rutrum vitae, congue in eros. Morbi consequat cursus luctus. Vivamus eget ullamcorper elit. Proin in augue eget lorem auctor consequat a eget tortor. Donec vulputate a risus nec pharetra. Donec sodales mauris quis nunc eleifend, nec sodales sapien vulputate. Morbi porttitor, ipsum vitae lobortis feugiat, lacus dolor fringilla sapien, ut volutpat nisi libero sed nisl. Sed non ex eros. Duis volutpat nisi sapien, nec vulputate ligula porta ut. Nullam vel luctus enim, a faucibus ipsum. Aliquam erat volutpat.

Aenean facilisis auctor varius. Phasellus commodo metus vel urna luctus, ut ultricies lacus dignissim. Vivamus sed malesuada nibh, nec gravida diam. Sed nec rhoncus lectus, eu aliquam arcu. Proin porttitor urna sed ultrices sodales. Vivamus lacinia, odio vitae rhoncus bibendum, urna nunc accumsan eros, vestibulum accumsan tortor nunc in erat. Sed eget risus ornare, dignissim mauris eu, consectetur lacus. Nam ante orci, faucibus ut nulla vehicula, laoreet ornare massa. Nulla lobortis tincidunt consequat. In hac habitasse platea dictumst. Maecenas magna dui, molestie tristique libero a, suscipit sollicitudin tellus. Suspendisse non mattis sapien, ac convallis purus. Donec enim dolor, pretium et euismod sit amet, fringilla et nisl. Ut odio leo, varius eget nulla sed, bibendum posuere nulla. Donec pulvinar faucibus dui, id bibendum nulla vehicula vel. Donec sit amet volutpat ante.

Suspendisse scelerisque orci sed felis maximus auctor. Integer in sapien lorem. Nullam et nisi mollis, aliquam odio posuere, ornare lectus. Aenean pellentesque id neque ut congue. Donec rhoncus ornare arcu, at venenatis nunc sagittis vel. Cras consequat a justo ac mattis. Morbi molestie egestas mauris, hendrerit imperdiet purus. Nunc convallis suscipit elit, quis ornare massa convallis nec.

Aliquam commodo, mauris vitae malesuada pharetra, mi diam rutrum tortor, non dignissim ante sapien vitae ante. Cras ac tortor convallis, cursus eros sit amet, tincidunt orci. Quisque eu viverra mauris, sollicitudin iaculis leo. Donec viverra massa ac ipsum vestibulum dapibus. Pellentesque mattis iaculis felis sit amet interdum. Cras dictum nunc tellus, id gravida ligula tincidunt sit amet. Praesent ut ligula non nisi faucibus accumsan quis vel dui. Sed sed odio gravida, volutpat tellus ut, condimentum justo. Cras tincidunt lobortis dolor vitae consectetur. Suspendisse ullamcorper metus lorem, a luctus purus vestibulum eget.
[[/tab]]
[[/tabview]]
[[/collapsible]]

This component alters tabs via CSS to give them a vintage feel. It is recommended you use shorter tab titles with this component. To use it, paste the following:

> @@[[include :scp-wiki:component:chicago-spirit]]@@

It should also be noted that this component was built for Sigma-9. While it still works on BHL, it doesn't look the best on it.

++++ [[size 125%]]📎[[/size]][[[component:cs-title | Chicago Spirit Title]]]

[[include component:cs-title title=**GoI-001:** The Chicago Spirit]]

This component is used to create a telegram-style title for Chicago Spirit. It has to use with [[[component:chicago-spirit|Old Timey Chicago Spirit Tabs component]]].  To use it, paste the following:

> @@[[include component:cs-title title=TITLE]]@@

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:preview | Page Preview]]]
----
[[/=]]

This component adds invisible text at the beginning of your page for use as previews. To use it, paste the following at the top of your page:

> @@[[include :scp-wiki:component:preview@@
> |text=text]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:pages | Papers, Pages, and Post-it Notes]]]
----
[[/=]]
[[include :scp-wiki:component:pages
| medium=vintage-book
| contents=
<h1>Hello, welcome to my book.</h1>
I hope you <em>really enjoy</em> it so that the pain it took to write it was worth it.
]]

[[include :scp-wiki:component:pages
| medium=plain
| contents=
<b>Note to Self:</b>
Be Gay and Do Crime
]]


This component allows you to import custom divs that emulate the look of paper. Despite the name, the component is only capable of emulating paper pages at the moment. To use it, paste the following on your page:

> @@[[include :scp-wiki:component:pages@@
> | medium=vintage-book/plain
> | style=
> css
> | contents=
> this text will appear handwritten
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:parawatch-forum | Parawatch Forum Post]]]
----
[[/=]]

This component is used to make a Parawatch forum post, which can be used in your GoI Formats or Parawatch SCPs. The component will only properly work if used alongside the [[[theme:creepypasta | Creepypasta]]] or [[[theme:anon | Anon]]] themes. To use it, copy and paste the following:

> @@[[include :scp-wiki:component:parawatch-forum-post@@
>     color=color name or #rrggbb here |
>     username=account name of person | ← prefix with "🗿 " if a moderator
>     date=MM/DD/YY (DOW) HH:MM:SS | ← DOW is day of week, first three letters
>     postno=8digitnumber | ← should increase with time of creation
>     depth=0/1/2/3/4… | ← how many layers deep this post is
>     content=The actual forum post content goes here. ← if it spans across multiple lines, each must end with a space
> ]]

You can see this component in action in [[[michael the kiler]]].
@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:pride-highlighter | Pride Highlighter]]]
----
[[/=]]

This component allows you to easily add Pride icons to your page. You can see this component in action at the top of this page. Please refer to the component page for instructions on how to use it.

Despite the name, Pride Highlighter works on both Sigma-9 and BHL.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:ratio-bar | Ratio Bar]]]
----
[[/=]]

[[=image https://scp-wiki.wdfiles.com/local--files/component:ratio-bar/ratio1.png width="50%"]]
@@ @@
[[include :scp-wiki:component:ratio-bar pie=--]]

This component allows you to add a ratio bar to your rating modules, showing how many upvotes you've gotten in comparison to downvotes. To use it, paste the following:

> @@[[include :scp-wiki:component:ratio-bar base=--]]@@

The above [[include]] will modify any existing rating modules to show the ratio bar. The component also has a standalone piechart that can be included without modifying any rating modules. To use it, paste the following:

> @@[[include :scp-wiki:component:ratio-bar pie=--]]@@

It's recommended to put this inside info modules.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:redzone-advisory | Redzone Advisory]]]
----
[[/=]]

[[=image http://lspr.wdfiles.com/local--files/components-hub/redzonehead.png]]


This component allows you to use the header for Redzone GoI Formats, a group closely associated with [[[prometheus-labs-hub | Prometheus Labs]]]. To use it, paste the following:

> @@[[include :scp-wiki:component:redzone-advisory@@
> |title=Redzone RedDB Archive Asynchronous Copy Vulnerability
> |id=redzone-sa-########-[shorter title]
> |updated=YYYY-M-DD
> |published=YYYY-M-DD
> |version=version
> |impact=number from 0.0 to 10.0
> |worknd=true/false
> |bugs=RZux#####
> RZux####
> |cve=CVE-YYYY-####
> |cwe=CWE-###
> CWE-###
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:responsive-tables | Responsive Tables]]]
----
[[/=]]
[[include :scp-wiki:component:responsive-tables-source |responsive-table-start= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-start= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
Sex
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
Height
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
Weight/Build
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
Race
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
Hair
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
Eyes
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
Identifying Attributes
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |row-start= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Sex ]]
Male
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Height ]]
70in
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Weight/Build ]]
Slender
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Race ]]
Caucasian
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Hair ]]
Black
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Eyes ]]
Brown/Star-shaped Pupils
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Identifying Attributes ]]
Cordial disposition
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |row-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |row-start= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Sex ]]
Female
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Height ]]
61in
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Weight/Build ]]
Thin
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Race ]]
East Asian
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Hair ]]
Black
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Eyes ]]
Pale Green
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=Identifying Attributes ]]
Flamboyantly dressed
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |row-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |responsive-table-end= --] ]]

This component includes a custom table that formats itself to still be readable on different screen/tab sizes.

For instructions on how to use this component, please refer to its component page.
@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:s7-apcs | Site 7 Anomalous Phenomenon Classification System]]]
----
[[/=]]
[[include :scp-wiki:component:s7-apcs
scp-number = SCP-0000 |
scp-class = keter |
non-standard-class = А |
lineFirst = Security Clearance Level 4 |
lineSecond = Dr. Ivensky, object curator, 44-871 |
lineThird = Store in cell 32ВА, Site 7 |
danger-select-1 = Physical Impact |
danger-select-2 = Logical Paradox |
danger-select-3 = Extremely Low Temperatures |
danger-select-4 = Mind Control |
danger-select-5 = Sentient  |
danger-select-6 = Acoustic Threat |
activation = Condition-component |
threat-ind = 6 |
contaiment-risk = KC |
k-class = СК]]

This component serves as a header for your SCP Articles. Please read [[[s7-apcs-guide | this guide]]] for more information. To use it, paste the following at the top of your page:

> @@[[include :scp-wiki:component:s7-apcs@@
> |scp-number= ####
> |scp-class= see the list below
> |non-standard-class = Any_value
> |lineFirst = Any_value
> |lineSecond = Any_value
> |lineThird = Any_value
> |danger-select-1 = Physical Impact
> |danger-select-2 = Logical Paradox
> |danger-select-3 =  Extremely Low Temperatures
> |danger-select-4 = Mind Control
> |danger-select-5 = Sentient
> |danger-select-6 = Acoustic Threat
> |activation = Any_value
> |threat-ind = 1-6
> |contaiment-risk = see the table below
> @@|k-class = Any_value]]@@

[[=]]
@@ @@
----
+++ [[size 125%]]📎[[/size]][[[component:svgheader | SVG Header]]]
----
[[/=]]
[[include :scp-wiki:component:svgheader
|lv=3
|threat=green
|item=XXXX
|oc=Safe
|oc2=(Pending)
|pend=true
]]

This component serves as a header for your SCP Articles. To use it, paste the following at the top of your page:

> @@[[include :scp-wiki:component:svgheader@@
> |lv=1-6
> |threat=white/blue/green/orange/red/black/undefined
> |item=XXXX
> |oc=safe/euclid/keter/thaumiel/other
> |oc2=safe/euclid/keter/thaumiel/other
> |pend=true/false
> @@]]@@
@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:text-style | Text Style]]]
----
[[/=]]
[[div class="text-container-wrap"]]
John Jacob Jingleheimer Schmidt
[[div class="text-container"]]
[[div class="sent"]]
[[span class="text"]]Now testing messages.[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]Wow, really?[[/span]]
[[span class="text"]]That's so cool! _
And is this a multiline message?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]You really think so?[[/span]]
[[span class="text"]]That's great![[/span]]
[[span class="text"]]Yup, that has multiple lines![[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]Yeah![[/span]]
[[span class="text"]]Thanks, JaonHax! _
Wait, did I break its scrolling ability somehow?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]Yup.[[/span]]
[[span class="text"]]I think you did.[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]Ah, well.[[/span]]
[[span class="text"]]I guess JaonHax will just have to make sure that this thing has an infinite maximum height, huh?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]Yeah, I guess so.[[/span]]
[[span class="text"]]Anyway, we should probably let the awesome individual who's reading this move on with their day.[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]Bye, Awesome Person![[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]Yeah, bye![[/span]]
[[/div]]
[[/div]]
[[/div]]

This component allows you to emulate the look and feel of SMS messaging. To use it, paste the following at the top of your page:

> @@[[include :scp-wiki:component:text-style]]@@

Then, for the actual text messages, add the following:

[[code]]
[[div class="text-container-wrap"]]
+++ Your Sender's Name Here
[[div class="text-container"]]
[[div class="sent/recv"]]
[[span class="text"]]this is a single text[[/span]]
[[div class="sent/recv"]]
[[span class="text"]]this is a[[/span]]
[[span class="text"]]series of attached texts[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/code]]

Note that the component currently does not support embedding files or images.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:tz | Timezone Converter]]]
----
[[/=]]

This component allows you to show a time that is converted into a user's timezone. For example:

[[include :scp-wiki:component:tz
| time=18:00
| tz=EST
]]

To use it, paste the following:

> @@[[include :scp-wiki:component:tz@@
> | time=##:##, must be in 24 hour format
> | tz=default is UTC
> | date=YYYY-MM-DD, default is today
> | text_before=default is ${time} ${tz} is
> | text_after=default is "."
> ]]

Everything besides the time parameter is optional.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:vaf-links | Vaf Links]]]
----
[[/=]]

This component is meant for use with the [[[theme:wondertainment | Wondertainment Theme]]]. It adds links at the bottom for series navigation and adds a link to turn the theme on or off. To use it, paste the following:

> @@[[include :scp-wiki:component:vaf-links@@
> | position=middle
> | previous-page=
> | previous-page-name=
> | next-page=
> | next-page-name=
> ]]

You can see this component in action on [[[what-a-wonderful-world |...And I Think to Myself]]].

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:void-post | Void Post Template]]]
----
[[/=]]
[[include :scp-wiki:component:void-post
|profile-pic= https://upload.wikimedia.org/wikipedia/commons/7/70/1_Troll.jpg
|username= Coal 14
|handle= malov13
|void-msg= bad take, u suck + ratio [[span class="vactivity"]]⁂BottomDownOver[[/span]] [[span class="vactivity"]]#owned[[/span]]@@ @@
|echoes= 150
|hums= 2.3k
|time-and-date= 25:67 31 Feburary 3 AD
]]

This component allows you to include a div formatted to look like a post on Void. Void is an in-universe Twitter analogue used by anomalous communities. To use it, paste the following:

> @@[[include :scp-wiki:component:void-post@@
> |profile-pic= Recommended File Width: ≤150px
> |username=
> |handle=
> |void-msg= Suggested Length: ≤280 characters; Any Length OK
> |echoes= Retweets
> |hums= Likes
> |time-and-date= Suggested Format: H:MM AM/PM - D Month YYYY
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:wikimodule | Wikimodule]]]
----
[[/=]]

[[include :scp-wiki:component:wikimodule |normal= --]]]

This component allows you to display 15 random SCPs and Tales that you have posted at the bottom of your page. It is mandatory that you put this above the Licensebox and wikiwalk footers, but suggested to have it after your footnoteblock. To use it, paste the following on your page:

> @@[[include :scp-wiki:component:wikimodule |normal= --]]]@@

If you want it to show ratings alongside the articles, paste the following instead:

> @@[[include :scp-wiki:component:wikimodule |ratings= --]]]@@

@@ @@
----
----

Components Gen2

Module Styles

Inline Styles

Includes

CSS Classes

Page Source