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;}

```
--hue: ###;
```
```
--content: 
```
```
--content: 
```
```
--content: 
```
```
--content: 
```
```
--content: 
```

--style05-glitch-size: 1rem; padding-left: 5.0ch; padding-right: 5.0ch;

--src: url(https://scp-wiki.wdfiles.com/local--resized-images/scp-4273/dcalfine.jpg/medium.jpg)

--src: url(https://scp-wiki.wdfiles.com/local--resized-images/scp-4273/dcalfine.jpg/medium.jpg)

```
blockquote
```
```
blockquote
```
```
fnnum
```
```
fncon
```
```
fnnum
```
```
fncon
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
estrella-paper
```
```
snote
```
```
blockquote
```
```
estrella-paper
```
```
vintage
```
```
estrella-paper
```
```
weathered
```
```
estrella-paper
```
```
verso
```
```
estrella-paper
```
```
washi
```
```
estrella-paper
```
```
snote
```
```
twitterLink
```
```
style01-plaintext
```
```
animation01
```
```
style02-plaintext
```
```
animation02
```
```
style03-plaintext
```
```
animation03
```
```
style04-plaintext
```
```
animation04
```
```
style05-plaintext
```
```
animation05
```
```
style05-plaintext
```
```
animation05
```
```
hoverlink
```
```
hoverlink-card
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink-image
```
```
hoverlink-card
```
```
hoverlink-card--static
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink-image
```

+ 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:slim-acs | Slim ACS]]]
----
[[/=]]

[[include :scp-wiki:component:slim-acs-source
|item-number=6776
|clearance=four
|container-class=safe
|disruption-class=keneq
|risk-class=caution
]]

This component removes the danger diamond and the circles for class icons, among other things. To use it, paste the following:

[[div class="blockquote"]]
@@[[include :scp-wiki:component:slim-acs-source@@
|item-number= 
|clearance= 
|container-class= 
|disruption-class= 
|risk-class= 
]]
[[/div]]

The component also includes a bunch of custom settings to be added to the first line of the include:

[[div class="blockquote"]]
| @@inc-no-item=--@@
| @@inc-wide=--@@
| @@inc-darkmode=--@@
| @@inc-animation=--@@
[[/div]]

@@ @@
[[=]]
----
+++ [[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://example.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:classification-effect | Classification Effect]]]
----
[[/=]]

[[include :scp-wiki:component:classification-effect-source |block=--]
|declassification-speed=500
|classification-speed=2000
|content=boo!
]]

This component is used to censor and uncensor text with a simple click. To use it, paste the following after any theme includes:

[[div class="blockquote"]]
@@[[include :scp-wiki:component:classification-effect-source |styles=--] ]]@@
[[/div]]

Then paste the following:

[[div class="blockquote"]]
@@[[include :scp-wiki:component:classification-effect-source |block=--]@@
|declassification-speed=Number 
|classification-speed=Number 
|content=text _
more text
]]
[[/div]]

If you want it to be inline with other, non-classified text, then paste the following:

[[div class="blockquote"]]
@@[[include :scp-wiki:component:classification-effect-source |inline=--]@@
|declassification-speed=Number 
|classification-speed=Number 
|content=text 
]]
[[/div]]

@@ @@
[[=]]
----
+++ [[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:countdown|]]]
----
[[/=]]

[[include :scp-wiki:component:countdown
| timestamp = t + 300
| format = MM:SS
| text_when_elapsed = Timer ended.
| css =
.countdown {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}
]]

This component creates a countdown timer, intended to count down to some real-world event (e.g. the end of a contest), but it can be used for anything, and can even trigger CSS when the timer elapses. You can give it a specific timestamp, a list of timestamps, or a formula to calculate a timestamp when the page is loaded. To use it, paste the following on your page:

[[div class="blockquote"]]
@@[[include :scp-wiki:component:countdown@@
| timestamp =
| format = HH:MM:SS
| text_when_elapsed =
| css =
@@]]@@
[[/div]]

@@ @@
[[=]]
----
+++ [[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:

[[div class="blockquote"]]
@@[[include :scp-wiki:component:croqstyle]]@@
[[/div]]

@@ @@
[[=]]
----
+++ [[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:dynamic-emails | Dynamic Emails]]]
----
[[/=]]

[[include :scp-wiki:component:dynamic-emails code=--]]
[[include :scp-wiki:component:dynamic-emails start=--
|from= Queerious@scp.int
|to= Writer@scp.int
|cc= SCP-Wiki@scp.int
|subject= Dynamic Emails?
]]
This component allows you to create dynamically resizing emails that are easy to include, provide simple customization and let you include profile pictures, all without having to deal with tables. The component page has instructions, as well as alternative versions, including with attachments!
[[include :scp-wiki:component:dynamic-emails end=--
|name= Queerious
|title= Transbian Disaster
|signoff= Queerify, Disturb, Pester
|signoff-icon= https://d2qhngyckgiutd.cloudfront.net/9b878a0e58674ff67c50c62b69e599d8
]]

To use this component, paste the following line at the top of your page source:

> @@[[include :scp-wiki:component:dynamic-emails code=--]]@@

Wherever you would like to include an email, paste and fill out the following code:
> @@[[include :scp-wiki:component:dynamic-emails start=--@@
> @@|from= sender@scp.int@@
> @@|to= receiver@scp.int@@
> @@|cc= copied@scp.int@@
> @@|subject= Email Subject@@
> @@]]@@
> @@This is where the raw text goes, the entire body of your email. You can just write this as desired, including custom **formatting** or ##red|color## changes, and there should be no issues. @@
> @@[[include :scp-wiki:component:dynamic-emails end=--@@
> @@|name= Sender's Name@@
> @@|title= Foundation Researcher@@
> @@|signoff= Secure, Contain, Protect@@
> @@|signoff-icon= https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/Default_Profile_Icon.png@@
> @@]]@@

Please refer to the component page for detailed instructions and specifics.

@@ @@
[[=]]
----
+++ [[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]][https://scp-wiki.wikidot.com/component:assorted-paper Estrella's Assorted Bundle of Papers  ]
----
[[/=]]

[[div class="estrella-paper snote"]]
Note to self: Show off the super cool paper component with a super cool note to self.
[[/div]]

This component offers a collection of paper-styled blocks for your use. To use it, paste the following somewhere on your page:

> @@[[include :scp-wiki:component:assorted-paper]]@@

The component has the following blocks:

[[div class="blockquote"]]
* @@[[div class="estrella-paper vintage"]]@@
* @@[[div class="estrella-paper weathered"]]@@
* @@[[div class="estrella-paper verso"]]@@
* @@[[div class="estrella-paper washi"]]@@
* @@[[div class="estrella-paper snote"]]@@
 * You can also change the color of snote by adding @@style="--hue: ###;"@@. Try it out!
[[/div]]

@@ @@ 
[[=]]
----
+++ [[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]]] theme.

@@ @@
[[=]]
----
+++ [[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]][[[component:generic-social-media-post | Generic Social Media Post]]]
----
[[/=]]
[[include :scp-wiki:component:generic-social-media-post code=--]]
[[include :scp-wiki:component:generic-social-media-post start=--
|pfp=https://scp-wiki.wdfiles.com/local--resized-images/scp-4273/dcalfine.jpg/medium.jpg
|name=Everything is not Al Fine
|atname=dcalfine
]]
[[span class="twitterLink"]]O5Council[[/span]] can you clean up the mess you left in Eurtec? It's awful.
[[include :scp-wiki:component:generic-social-media-post end=--
|time=1:00 AM
|date=2/24/2018
|views=1.5m
|comments=2.4k
|quotes=10k
|likes=5
]]
To use this component, paste the following once on your page:
> @@[[include :scp-wiki:component:generic-social-media-post code=--]]@@

Then, whereever you want your posts, paste the following:

> [[include :scp-wiki:component:generic-social-media-post start=@@--@@
> |pfp=image.link
> |name=name
> |atname=handle
> ]]
> text text text
> [[include :scp-wiki:component:generic-social-media-post end=@@--@@
> |time=X:XX AM
> |date=X/XX/XXXX
> |views=XX
> |comments=XX
> |quotes=XX
> |likes=XX
> ]] 

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:glitch-elements | Glitch Elements]]]
----
[[/=]]

[[include :scp-wiki:component:glitch-elements]]

This component is used to apply glitch animations to text on your pages. The component includes 5 varying styles, of which each includes a "font style" that only applies fonts and other average style properties and an animation. For further information on how to use this component, check out it's page!

[[=]]
[[span class="style01-plaintext animation01" style="--content: "We Die in the Darkness";"]]We Die in the Darkness[[/span]]

[[span class="style02-plaintext animation02" style="--content: "So You Can Live in the Light";"]]So You Can Live in the Light[[/span]]

[[span class="style03-plaintext animation03" style="--content: "IS THAT THE BREACH ALARM?";"]]IS THAT THE BREACH ALARM?[[/span]]

[[span class="style04-plaintext animation04" style="--content: "Never mind";"]]Never mind[[/span]]

[[span class="style05-plaintext animation05" style="--content: "It was just the microwave";"]]It was just the microwave[[/span]]

[[/=]]

------

[[=]]
[[div class="style05-plaintext animation05" style="--style05-glitch-size: 1rem; padding-left: 5.0ch; padding-right: 5.0ch;"]]

What have we here? This is interesting now...

The uses I could fathom for this one. Pair it with some fun stylization like     too    man-y             spaces, a-l-l-l-l-l to make itititititit sEem MORe G-LIT-CHE--D!

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

@@ @@
[[=]]
----
+++ [[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]]]@@

@@ @@
[[=]]
----
+++ [[size 125%]]📎[[/size]][[[component:hoverlinks | Hoverlinks!]]]
----
[[/=]]

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

This component is used to create Hoverlinks, links that reveal info when you hover them. A link to the [[span class="hoverlink"]][[[components-hub|Components Hub]]]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]Components Hub[[/span]][[span class="hoverlink-text"]]It's a hub for components![[/span]][[span class="hoverlink-image" style="--src: url(https://scp-wiki.wdfiles.com/local--resized-images/scp-4273/dcalfine.jpg/medium.jpg)"]]-[[/span]][[/span]][[/span]] might look like that, for example.

Outside of a link, it might look like this:

[[span class="hoverlink-card hoverlink-card--static"]][[span class="hoverlink-title"]]Components Hub[[/span]][[span class="hoverlink-text"]]It's a hub for components![[/span]][[span class="hoverlink-image" style="--src: url(https://scp-wiki.wdfiles.com/local--resized-images/scp-4273/dcalfine.jpg/medium.jpg)"]]-[[/span]][[/span]]

Components Gen1

Module Styles

Inline Styles

Includes

CSS Classes

Page Source