Components Gen1

Link to article: Components Gen1.

/*ACS fixing*/
.anom-bar-container div.class-text { grid-area: auto; }
.anom-bar-container div:hover::after {display:block;}

(none)

```
fnnum
```
```
fncon
```
```
fnnum
```
```
fncon
```

+ Components
@@ @@
@@ @@
++ General
@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:advanced-navigation-toolbar | Advanced Navigation Toolbar (ANT)]]]
----
[[/=]]
[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= false
|styleNum= one
|prev= https://scp-wiki.wikidot.com/scp-001 |prevtext= SCP-001
|prevImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png
|hub= https://scp-wiki.wikidot.com/scp-series |hubtext= Series One Hub
|next= https://scp-wiki.wikidot.com/scp-003 |nexttext= SCP-003
|nextImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Yesod.png
]]

This component serves as a semi-customizable navigation system to guide readers through a series. To use it, paste the following at the bottom of your page:

> @@[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= false@@
> |styleNum= one
> |prev= articleURL |prevtext= link text
> |prevImage= prevImageURL
> |hub= hubURL |hubtext= Name
> |next= articleURL |nexttext= link text
> |nextImage= nextImageURL
> @@]]@@
@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:anomaly-class-bar | Anomaly Class Bar (ACS)]]]
----
[[/=]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 6776
|clearance= 4
|container-class= esoteric
|secondary-class= thaumiel
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg
|disruption-class= vlam
|risk-class= caution
]]
[[module css]]
/*ACS fixing*/
.anom-bar-container div.class-text { grid-area: auto; }
.anom-bar-container div:hover::after {display:block;}
[[/module]]
This component serves as a header for SCP articles. It shows an SCP's Item Number, Containment Class, Disruption Class, and Risk Class. Definitions of these can be found in [[[anomaly-classification-system-guide | this guide]]]. To use it, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:anomaly-class-bar-source@@
> |item-number= XXXX
> |clearance= #
> |container-class= class_here
> |secondary-class= class_here
> |secondary-icon= http://urlhere.com
> |disruption-class= keneq
> |risk-class= notice
> ]]

You can see pages that use ACS via this [[[anomaly-classification-system-guide#acs-db | fancy database]]] made by [[*user Woedenaz]].

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:acs-animation | ACS Animation]]]
----
[[/=]]
This component animates the ACS header when the page is being loaded in. To use it, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:acs-animation]]@@

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

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:acs-hybrid-text-bar | ACS Hybrid & Text Bar]]]
----
[[/=]]

[[include :scp-wiki:component:acs-hybrid-text-bar-source
|version= hybrid
|item-number= 6776
|clearance-level= 4
|containment-class= safe
|include-secondary= yes
|secondary-class= thaumiel
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg
|disruption-class= keneq
|risk-class= caution
]]
@@ @@
[[include :scp-wiki:component:acs-hybrid-text-bar-source
|version= text
|item-number= 6776
|clearance-level= 4
|containment-class= safe
|include-secondary= yes
|secondary-class= thaumiel
|disruption-class= keneq
|risk-class= caution
]]

A less detail-heavy version of ACS. To use it, paste the following at the top of your page:

> @@[[include :scp-wiki:component:acs-hybrid-text-bar-source@@
> |version= hybrid/text
> |item-number= ####
> |clearance-level= #
> |containment-class= class_here
> |include-secondary= yes/no
> |secondary-class= class_here
> |secondary-icon= https://urlhere.com
> |disruption-class= class_here
> |risk-class= class_here
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:acs-horm-lite | ACS Lite by Hormress]]]
----
[[/=]]

[[include :scp-wiki:component:acs-horm-lite-source
|item-number= 6776
|clearance= 4
|container-class= esoteric
|secondary-class= thaumiel
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg
|disruption-class= keneq
|risk-class= caution
]]
An ACS component that unifies line thickness to 3px and almost halves the size of the header on most devices. To use, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:acs-horm-lite-source@@
> |item-number= XXXX
> |clearance= #
> |container-class= class_here
> |secondary-class= class_here
> |secondary-icon= http://urlhere.com
> |disruption-class= class_here
> |risk-class= class_here
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:acs-peppo-lite | ACS Lite by Peppo]]]
----
[[/=]]

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

This component shrinks ACS on most devices, and gives it a slightly different feel. To use it, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:acs-peppo-lite@@
> |item-number= ####
> |clearance= #
> |container-class= class_here
> |secondary-class= class_here
> |secondary-icon= http://urlhere.com
> |disruption-class= class_here
> |risk-class= class_here
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:acs-peppo-split | ACS Splitter by Peppo]]]
----
[[/=]]

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

This component allows for both Containment and Secondary Classes to be displayed at the same time. To use it, paste the following somewhere on your page after the [[include]] for ACS:

> @@[[include :scp-wiki:component:acs-peppo-split@@
> |object= class_here
> |object-image= http://urlhere.com
> |object-color= class_here
> |esoteric-color= class_here
> ]]

The base ACS include should be set to display the Secondary Class, with {{object}}, {{object-image}}, and {{object-color}} set as the Containment Class you want.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:advanced-information-methodology | Advanced Information Methodology (AIM)]]]
----
[[/=]]

[[include :scp-wiki:component:advanced-information-methodology
|XXXX=6776
|lv=four
|cc=THAUMIEL
|dc=KENEQ
|site=N/A
|dir=N/A
|head=Dr Akabi Hayk
|mtf=N/A
]]

This component serves as a header for your SCP articles, combining other commonly used headers into a single one. To use it, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:advanced-information-methodology@@
> |XXXX=####
> |lv=one/two/three/four/five/fix
> |cc=SAFE/EUCLID/KETER/NEUTRALIZED/THAUMIEL
> |dc=DARK/VLAM/KENEQ/EKHI/AMIDA
> |site=Site-##/ N/A
> |dir=Dr Director/ N/A
> |head=Dr Doctor/ N/A
> |mtf=Name-#/ N/A
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:audio-player-woed | Audio Player Woed]]]
----
[[/=]]

[[include :scp-wiki:component:audio-player-woed-source
|unique-name=secretparty
|audio-file=https://upload.wikimedia.org/wikipedia/commons/1/16/J.Brahms_plays_Josef_Strauss.1889..ogg
|background-color=rgb(252, 252, 252)
|border-color=rgb(215, 215, 215)
|border-radius=0.313rem
|dropshadow-color=rgba(12, 12, 12, 0.15)
|text-color=rgb(80, 0, 2)
|icons-color=rgb(171, 0, 5)
|player-color=rgb(215, 215, 215)
|progress-color=rgb(80, 0, 2)
]]

This component offers up a fully customizable audio player. To use it, paste the following where you want it to be in your article:

> @@[[include :scp-wiki:component:audio-player-woed-source@@
> |unique-name=secretparty (only words, no numbers)
> |audio-file= https://thisisalink.com/PartyTime.mp3 (all audio file types allowed)
> |background-color=rgb(252, 252, 252)
> |border-color=rgb(215, 215, 215)
> |border-radius=0.313rem
> |dropshadow-color=rgba(12, 12, 12, 0.15)
> |text-color=rgb(80, 0, 2)
> |icons-color=rgb(171, 0, 5)
> |player-color=rgb(215, 215, 215)
> |progress-color=rgb(80, 0, 2)
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:author-label | Author Label]]]
----
[[/=]]

[[>]]
[[module Rate]]
[[/>]]
[[include :scp-wiki:component:author-label-source start=--
|name=TopDownUnder & ur mother?]]
that's right I'm writing a component hub with UR MOM whatcha gonna do about it
[[include :scp-wiki:component:author-label-source end=--]]

This component offers a means to credit authors at the beginning of a page via a small dropdown menu. To use it, paste the following after your rating module:

> @@[[include :scp-wiki:component:author-label-source start=--@@
> |name=name(s)]]
> content
> [[include :scp-wiki:component:author-label-source end=--]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[author-page-tool | Author Page Tool]]]
----
[[/=]]

This component offers a quick and easy way to set up an author page, without the need for updating it every time you post a new page. To use it, paste the following onto your page:

> @@[[include :scp-wiki:component:author-page order=created_at]]@@

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:betterfootnotes | BetterFootnotes]]]
----
[[/=]]

This component offers custom footnotes like those in [[[SCP-4485]]]. To use, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:betterfootnotes]]@@

Then, everything you wish to have a footnote, paste the following where you want it:

> @@[[span class="fnnum"]].[[/span]][[span class="fncon"]]Text in footnote.[[/span]]@@

Be careful to not edit anything within the fnnum span, or else the component may break.[[span class="fnnum"]].[[/span]][[span class="fncon"]]If done correctly, it should look something like this![[/span]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:bhl-style-collapse | BHL Style Collapsibles]]]
----
[[/=]]

This component modifies the pre-existing @@[[collapsible]]@@ element to give it a new look. To use it, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:bhl-style-collapse-source]]@@

You can see this component in action on [[[Flos]]].

[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:blacklight-box | Blacklight Box]]]
----
[[/=]]

This component offers up fancy, BHL-style divs to decorate your page with. To use, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:blacklight-box-source |inc-source= --]]]@@

After that, everytime you wish to use on of the boxes, paste this where you want it to be:

> @@[[include :scp-wiki:component:blacklight-box-source |inc-section-start= --]@@
> |color-family=optional-colors
> |unique-name=lowercase-nospaces
> |display-name=text in label
> ]]
> Insert content of box here.
> @@[[include :scp-wiki:component:blacklight-box-source |inc-section-end= --]]]@@

The "color-family" field is optional and used for any custom colours you have for your boxes.

You can see this component in action in [[[McDoctorate's Proposal]]].

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:cd-ver2 | Cd Ver2]]]
----
[[/=]]

[[include :scp-wiki:component:cd-ver2
|lv=4
|item=SCP-6776
|class=Thaumiel
|site-responsible=N/A
|director=N/A
|research-head=Dr. Akabi Hayk
|assigned-task-force=N/A
]]

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

> @@[[include :scp-wiki:component:cd-ver2@@
> |lv=1/2/3/4/5/6
> |item=SCP-XXXX
> |class= Class
> |site-responsible=Site/Area-##
> |director= name
> |research-head= name
> |assigned-task-force= MTF Name-## ("Codename")
> ]]

You can see this component in use in [[[roget-s-conspiracy-theory-for-scp-001 |Anonymous Proposal II]]].

[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:classified-bar-woed | Classified Bar Woed]]]
----
[[/=]]

[[include :scp-wiki:component:classified-bar-woed
|lv=4
|item=6776
|oc=Thaumiel
|lang=EN
]]

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:classified-bar-woed@@
> |lv=0/1/2/3/4/5
> |item=XXXX
> |oc= class
> |lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR/IND
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:classified-decoration | Classified Decoration]]]
----
[[/=]]

[[include :scp-wiki:component:classified-decoration
|lv=4
|item=6776
|oc=Thaumiel
|lang=EN
]]

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

> @@[[include :scp-wiki:component:classified-decoration@@
> |lv=1/2/3/4/5
> |item=XXXX
> |oc=Class
> |lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:croqstyle | Croqstyle CSS]]]
----
[[/=]]

This component is a personal styling component for [[*user Croquembouche]] which contains small little CSS components. To use it, paste the following somewhere on your page:

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

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:discord-chat | Discord Chat]]]
----
[[/=]]

[[include :scp-wiki:component:discord-chat-source |inc-start= --] ]]
[[include :scp-wiki:component:discord-chat-source |inc-msg-start= --]
|user-id=jay
|username=catsby
|msg-time=11:00
]]
Angry, and half in love with her, and tremendously sorry, I turned away.
[[include :scp-wiki:component:discord-chat-source |inc-msg-end= --] ]]
[[include :scp-wiki:component:discord-chat-source |inc-msg-start= --]
|user-id=sans
|username=sans
|msg-time=11:01
]]
based and gatbilled
[[include :scp-wiki:component:discord-chat-source |inc-msg-end= --] ]]
[[include :scp-wiki:component:discord-chat-source |inc-end= --] ]]

This component allows you to emulate the look of a Discord chat in your pages. To use it, paste the following at the top of your page:

> @@[[include :scp-wiki:component:discord-chat-source |inc-source= --]]]@@

Please refer to the component page for further instructions on its use.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:doc-transcript-swapper|Document Transcript Swapper]]]
----
[[/=]]

[[include :scp-wiki:component:doc-transcript-swapper start=--
|image= https://i.imgur.com/oq1sciF.jpg
|totrans= Show Transcribed Document
|toimage= Show Original Document]]
Never going to give you up
Never going to let you down
[[include :scp-wiki:component:doc-transcript-swapper end=--]]

This component allows you to give the reader the option to view a transcribed version of an image. To use it, paste the following:

> @@[[include :scp-wiki:component:doc-transcript-swapper start=--@@
> @@|image= image.png@@
> @@|totrans= Show Transcribed Document@@
> @@|toimage= Show Original Document]]@@
> @@Write the transcript of the image's text here@@
> @@[[include :scp-wiki:component:doc-transcript-swapper end=--]]@@

Please refer to the component page for further instructions on its use.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:earthworm | Earthworm Series Navigator]]]
----
[[/=]]

[[include :scp-wiki:component:earthworm
| first=false | last=false | hub=yes
| previous-url=/ai-classification-guide | previous-title=AI Classification Guide
| next-url=/project-ruby | next-title=PROJECT RUBY
| hub-url=/aiad-homescreen | hub-title=AIAD HUB
]]

This component serves as an easy way to guide readers through a tale series. To use it, paste the following at the bottom of your page:

> @@[[include :scp-wiki:component:earthworm@@
> | first=true/false | last=true/false | hub=yes/no
> | previous-url=URL_OF_PREVIOUS | previous-title=TITLE OF PREVIOUS
> | next-url=URL_OF_NEXT | next-title=TITLE OF NEXT
> | hub-url=URL_OF_HUB | hub-title=TITLE OF HUB
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:fade-in | Fade In]]]
----
[[/=]]

This component smoothly fades in the contents of a page, instead of having it all load at once. To use it, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:fade-in speed=1/2/3]]@@

You can see this component in action in the [[[theme:blankstyle | BLANKSTYLE]]] and [[[theme:placestyle | PLACESTYLE]]] themes.

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:flops-header | Flops Header]]]
----
[[/=]]

[[include :scp-wiki:component:flops-header
|item= 6776
|containment= thaumiel
|level= 4
|security= secret
|disruption= keneq
|disruption-bg-color= #bd9d00
]]

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

> @@[[include :scp-wiki:component:flops-header@@
> |item= 0001–9999
> |containment= safe/euclid/keter/thaumiel/other
> |level= 1–6
> |security= unrestricted/restricted/confidential/secret/top-secret/other
> |disruption= dark/vlam/keneq/ekhi/amida/other
> |disruption-bg-color= #00638a/#008a5c/#bd9d00/#bd5200/#8a0022/your choice
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:fundraiser-widget | Fundraiser Widget]]]
----
[[/=]]

[[include :scp-wiki:component:fundraiser-widget-source amt= 2000
|goal= 1500
|title= Help Me Buy a New Stove
|main_url= https://www.gofundme.com/f/new-stove
|curr_sym=€|num_sep=.
|image_url= none
|donate_url= https://www.gofundme.com/f/new-stove/donate
|logo_text= @@@@
|description= @@@@
|hide_desc= true
]]

This component is used to link to any of your offsite fundraisers in a visually appealing way. **All use of this component must comply with the SCP Wiki's [[[Donations Policy]]].** To use this, paste the following on your page:

> @@[[include :scp-wiki:component:fundraiser-widget amt=@@
> |goal=
> |title=
> |main_url=
> |curr_sym=$|num_sep=,
> |image_url= none
> |donate_url= none
> |logo_text= @@@@
> |description= @@@@
> ]]

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[herman-fuller-hub | Herman Fuller Components]]]
----
[[/=]]

**Poster:**
[[include :scp-wiki:component:hf-poster title=The One Sent by God
|textLeft=SHE FLIES!

SHE HEALS!

SHE GIVES LIFE!

SHE HELPS!

LIFE!

|image=https://scp-wiki.wdfiles.com/local--files/herman-fuller-presents-the-one-sent-by-god/Angel

|textRight=

HUMAN?

BIRD?

MIRACLE?

ANGEL?

SOUL!

|textBottom= lorem ipsum

¡Don't miss it!|textFooter=ONE DAY ONLY
10 PM this Sunday.
Come one, come all!]]
[[collapsible show="VIEW PAGES" hide="HIDE PAGES]]
**Page Left:**
[[include :scp-wiki:component:hf-book-right chapter=Lorem ipsum

|content=Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel sem et est bibendum maximus a vel nibh. Fusce malesuada nunc ac cursus volutpat. Curabitur ullamcorper, diam sit amet fermentum dictum, dui sapien consequat urna, sed finibus massa augue lacinia lectus. Morbi at dignissim metus, nec accumsan purus. Proin egestas justo ante, vel vulputate velit venenatis ut. Curabitur mattis elit eget est interdum, id semper augue hendrerit. Vivamus a odio nec nulla laoreet ultricies eleifend a lectus. Praesent nibh sapien, congue non ultrices sit amet, varius non neque. Ut eu tempus turpis, quis vulputate lacus. Sed eget ex eget sem sodales ultricies. Nam eu mi vitae arcu ultricies tempor ut vitae lacus. Nullam nec convallis sapien, vel tincidunt ante. Nullam bibendum ullamcorper ipsum, sed tempor dolor sodales id. Nunc egestas posuere nisl et gravida. Quisque elementum ullamcorper nunc, vitae viverra massa fringilla eu. Phasellus cursus nunc eu risus vehicula, finibus blandit nulla convallis.

|pagenumber=285]]
**Page Right:**
[[include :scp-wiki:component:hf-book-left chapter=Lorem ipsum

|content=Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel sem et est bibendum maximus a vel nibh. Fusce malesuada nunc ac cursus volutpat. Curabitur ullamcorper, diam sit amet fermentum dictum, dui sapien consequat urna, sed finibus massa augue lacinia lectus. Morbi at dignissim metus, nec accumsan purus. Proin egestas justo ante, vel vulputate velit venenatis ut. Curabitur mattis elit eget est interdum, id semper augue hendrerit. Vivamus a odio nec nulla laoreet ultricies eleifend a lectus. Praesent nibh sapien, congue non ultrices sit amet, varius non neque. Ut eu tempus turpis, quis vulputate lacus. Sed eget ex eget sem sodales ultricies. Nam eu mi vitae arcu ultricies tempor ut vitae lacus. Nullam nec convallis sapien, vel tincidunt ante. Nullam bibendum ullamcorper ipsum, sed tempor dolor sodales id. Nunc egestas posuere nisl et gravida. Quisque elementum ullamcorper nunc, vitae viverra massa fringilla eu. Phasellus cursus nunc eu risus vehicula, finibus blandit nulla convallis.

|pagenumber=285]]
[[/collapsible]]

These components are related to the GoI Format for Herman Fuller's Circus of the Disquieting. To use them, paste the following:

> @@[[include :scp-wiki:component:hf-poster title=[1]|textLeft=[2]|image=[3]|textRight=[4]|textBottom=[5]|textFooter=[6]]]@@

> @@[[include :scp-wiki:component:hf-book-left chapter=[1]|content=[2]|pagenumber=[3]]]@@

> @@[[include :scp-wiki:component:hf-book-right chapter=[1]|content=[2]|pagenumber=[3]]]@@

Components Gen1

Module Styles

Inline Styles

Includes

CSS Classes

Page Source