Generic Social Media Post Component

Link to article: Generic Social Media Post Component.

.box {
    border: solid 1px black;
    margin: 10px;
    padding: 10px;
}
.emoji {
    width: 1.4rem;
    height: 1.2rem;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: transparent;
}
.pride {
    background-image:
    	linear-gradient(to bottom,
    		#ff000e 0 calc(1.2rem / 6),
    		#ff7300 calc(1.2rem / 6) calc(1.2rem / 6 * 2),
    		#fad220 calc(1.2rem / 6 * 2) calc(1.2rem / 6 * 3),
    		#138f3e calc(1.2rem / 6 * 3) calc(1.2rem / 6 * 4),
    		#3558a0 calc(1.2rem / 6 * 4) calc(1.2rem / 6 * 5),
    		#880082 calc(1.2rem / 6 * 5) 100%);
}
.trans {
    background-image:
    	linear-gradient(to bottom,
    		#5ccefa 0 20%, 
    		#f6a8b7 20% 40%, 
    		#fff 40% 60%, 
    		#f6a8b7 60% 80%, 
    		#5ccefa 80% 100%);
}
.gay {
    background-image:
    	linear-gradient(to bottom,
    		#007c6b 0 calc(1.2rem / 7),
    		#40a4a5 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#59c8d2 calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#7aade0 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#0b83c9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#04336f calc(1.2rem / 7 * 6) 100%);
}
.lesbian {
    background-image:
    	linear-gradient(to bottom,
    		#d82c01 0 calc(1.2rem / 7),
    		#f1752c calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#ff985b calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#d162a3 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b75591 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#a60260 calc(1.2rem / 7 * 6) 100%);
}
.bi {
    background-image:
    	linear-gradient(to bottom,
    		#c1357e 0 40%,
    		#675997 40% 60%,
    		#0655a9 60% 100%);
}
.nonbinary {
    background-image:
    	linear-gradient(to bottom,
    		#f7e45a 0 25%,
    		#f9fbfc 25% 50%,
    		#675997 50% 75%,
    		#222222 75% 100%);
}
.asexual {
    background-image:
    	linear-gradient(to bottom,
    		#222222 0 20%,
    		#a2a2a2 20% 40%,
    		#f9fbfc 40% 60%,
    		#a148a2 60% 80%,
    		#222222 80% 100%);
}
.pan {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#ffba00 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.intersex {
    background-image:
    	repeating-radial-gradient(circle at center,
    		#ffba00 0 30%,
    		#675997 30% 40%,
    		#ffba00 40% 100%);
}
.genderfluid {
    background-image:
    	linear-gradient(to bottom,
    		#f39ec1 0 20%,
    		#f9fbfc 20% 40%,
    		#a74a95 40% 60%,
    		#000 60% 80%,
    		#0068b5 80% 100%);
}
.agender {
    background-image:
    	linear-gradient(to bottom,
    		#000000 0 calc(1.2rem / 7),
    		#b9b9b9 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#fff calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#b8f58a calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#fff calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b9b9b9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#000000 calc(1.2rem / 7 * 6) 100%);
}
.aroace {
    background-image:
    	linear-gradient(to bottom,
    		#e68222 0 20%,
    		#eec62d 20% 40%,
    		#fff 40% 60%,
    		#49a6d5 60% 80%,
    		#1c304b 80% 100%);
}
.aromantic {
    background-image:
    	linear-gradient(to bottom,
    		#3AA640 0 20%,
    		#A8D47A 20% 40%,
    		#fff 40% 60%,
    		#AAABAB 60% 80%,
    		#000 80% 100%);
}
.omnigender {
    background-image:
    	linear-gradient(to bottom,
    		#ff92c5 0 20%,
    		#ff4ab3 20% 40%,
    		#24033c 40% 60%,
    		#5855f8 60% 80%,
    		#7b9dfb 80% 100%);
}
.omnisexual {
    background-image:
    	linear-gradient(to bottom,
    		#ffb0ca 0 20%,
    		#c9c0e8 20% 40%,
    		#a447a5 40% 60%,
    		#7193bf 60% 80%,
    		#9adaeb 80% 100%);
}
.genderqueer {
    background-image:
    	linear-gradient(to bottom,
    		#b390d6 0 calc(1.2rem / 3),
    		#fff calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#5d8437 calc(1.2rem / 3 * 2) 100%);
}
.polysexual {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#44cc70 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.polyamorous {
    background-image:
    	linear-gradient(to bottom,
    		#0808ff 0 calc(1.2rem / 3),
    		#ff0808 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#080808 calc(1.2rem / 3 * 2) 100%);
}

.twitterLink {
    color: #1d9bf9;
}
.twitterLink::before{
    content: "@";
}
.twitterLink:hover {
    text-decoration: underline;
    cursor: pointer;
}


/* Top Half Formatting */

.twitterContainer {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 1rem;
    border-radius: 1rem;
    background: white;
    padding: 1rem;
}
.twitterContainer img {
    border-radius: 1rem;
    width: 100%;
}
.twitterContainer table {
    width: 100%;
}
.twitterPFP {
    width: 3rem;
}
.twitterPFP img {
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1;
}
.twitterUsername {
    padding-left: 8px;
}
.twitterName {
    font-weight: bold;
}
.twitterNameLink {
    color: #778088;
}
.twitterNameLink::before, .twitterLink::before {
    content: "@";
}
.twitterOptions {
    font-weight: bold;
    text-align: right;
}
.twitterUsername p, .twitterNumbers p {
    margin-block-start: 0;
    margin-block-end: 0;
}
.twitterContainer .image-container {
    padding: 0;
}
.twitterBody {
    font-size: 1.1rem;
}
.twitterBody p:first-child {
    margin-block-start: 0;
}
.twitterBody p:last-child {
    margin-block-end: 0;
}

.twitterLink {
    color: #1d9bf9;
}
.twitterLink:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Emoji Formatting */

.emoji {
    width: 1.4rem;
    height: 1.2rem;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: transparent;
    margin: 0 2px;
}
.pride {
    background-image:
    	linear-gradient(to bottom,
    		#ff000e 0 calc(1.2rem / 6),
    		#ff7300 calc(1.2rem / 6) calc(1.2rem / 6 * 2),
    		#fad220 calc(1.2rem / 6 * 2) calc(1.2rem / 6 * 3),
    		#138f3e calc(1.2rem / 6 * 3) calc(1.2rem / 6 * 4),
    		#3558a0 calc(1.2rem / 6 * 4) calc(1.2rem / 6 * 5),
    		#880082 calc(1.2rem / 6 * 5) 100%);
}
.trans {
    background-image:
    	linear-gradient(to bottom,
    		#5ccefa 0 20%, 
    		#f6a8b7 20% 40%, 
    		#fff 40% 60%, 
    		#f6a8b7 60% 80%, 
    		#5ccefa 80% 100%);
}
.gay {
    background-image:
    	linear-gradient(to bottom,
    		#007c6b 0 calc(1.2rem / 7),
    		#40a4a5 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#59c8d2 calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#7aade0 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#0b83c9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#04336f calc(1.2rem / 7 * 6) 100%);
}
.lesbian {
    background-image:
    	linear-gradient(to bottom,
    		#d82c01 0 calc(1.2rem / 7),
    		#f1752c calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#ff985b calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#d162a3 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b75591 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#a60260 calc(1.2rem / 7 * 6) 100%);
}
.bi {
    background-image:
    	linear-gradient(to bottom,
    		#c1357e 0 40%,
    		#675997 40% 60%,
    		#0655a9 60% 100%);
}
.nonbinary {
    background-image:
    	linear-gradient(to bottom,
    		#f7e45a 0 25%,
    		#f9fbfc 25% 50%,
    		#675997 50% 75%,
    		#222222 75% 100%);
}
.asexual {
    background-image:
    	linear-gradient(to bottom,
    		#222222 0 20%,
    		#a2a2a2 20% 40%,
    		#f9fbfc 40% 60%,
    		#a148a2 60% 80%,
    		#222222 80% 100%);
}
.pan {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#ffba00 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.intersex {
    background-image:
    	repeating-radial-gradient(circle at center,
    		#ffba00 0 30%,
    		#675997 30% 40%,
    		#ffba00 40% 100%);
}
.genderfluid {
    background-image:
    	linear-gradient(to bottom,
    		#f39ec1 0 20%,
    		#f9fbfc 20% 40%,
    		#a74a95 40% 60%,
    		#000 60% 80%,
    		#0068b5 80% 100%);
}
.agender {
    background-image:
    	linear-gradient(to bottom,
    		#000000 0 calc(1.2rem / 7),
    		#b9b9b9 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#fff calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#b8f58a calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#fff calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b9b9b9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#000000 calc(1.2rem / 7 * 6) 100%);
}
.aroace {
    background-image:
    	linear-gradient(to bottom,
    		#e68222 0 20%,
    		#eec62d 20% 40%,
    		#fff 40% 60%,
    		#49a6d5 60% 80%,
    		#1c304b 80% 100%);
}
.aromantic {
    background-image:
    	linear-gradient(to bottom,
    		#3AA640 0 20%,
    		#A8D47A 20% 40%,
    		#fff 40% 60%,
    		#AAABAB 60% 80%,
    		#000 80% 100%);
}
.omnigender {
    background-image:
    	linear-gradient(to bottom,
    		#ff92c5 0 20%,
    		#ff4ab3 20% 40%,
    		#24033c 40% 60%,
    		#5855f8 60% 80%,
    		#7b9dfb 80% 100%);
}
.omnisexual {
    background-image:
    	linear-gradient(to bottom,
    		#ffb0ca 0 20%,
    		#c9c0e8 20% 40%,
    		#a447a5 40% 60%,
    		#7193bf 60% 80%,
    		#9adaeb 80% 100%);
}
.genderqueer {
    background-image:
    	linear-gradient(to bottom,
    		#b390d6 0 calc(1.2rem / 3),
    		#fff calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#5d8437 calc(1.2rem / 3 * 2) 100%);
}
.polysexual {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#44cc70 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.polyamorous {
    background-image:
    	linear-gradient(to bottom,
    		#0808ff 0 calc(1.2rem / 3),
    		#ff0808 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#080808 calc(1.2rem / 3 * 2) 100%);
}

/* Bottom Half Formatting */

.twitterNumbers {
    font-size: 0.8rem;
    margin-top: 1rem;
}
.twitterBorder {
    border-top: solid 1px #d5d5d5;
    border-bottom: solid 1px #d5d5d5;
}
.twitterCell {
    width: 25%;
}

(none)

```
blockquote
```
```
box
```
```
box
```
```
box
```
```
twitterLink
```
```
twitterLink
```
```
emoji
```
```
pride
```
```
emoji
```
```
pride
```
```
emoji
```
```
trans
```
```
emoji
```
```
trans
```
```
emoji
```
```
gay
```
```
emoji
```
```
gay
```
```
emoji
```
```
lesbian
```
```
emoji
```
```
lesbian
```
```
emoji
```
```
bi
```
```
emoji
```
```
bi
```
```
emoji
```
```
nonbinary
```
```
emoji
```
```
nonbinary
```
```
emoji
```
```
asexual
```
```
emoji
```
```
asexual
```
```
emoji
```
```
pan
```
```
emoji
```
```
pan
```
```
emoji
```
```
intersex
```
```
emoji
```
```
intersex
```
```
emoji
```
```
genderfluid
```
```
emoji
```
```
genderfluid
```
```
emoji
```
```
agender
```
```
emoji
```
```
agender
```
```
emoji
```
```
aroace
```
```
emoji
```
```
aroace
```
```
emoji
```
```
aromantic
```
```
emoji
```
```
aromantic
```
```
emoji
```
```
omnigender
```
```
emoji
```
```
omnigender
```
```
emoji
```
```
omnisexual
```
```
emoji
```
```
omnisexual
```
```
emoji
```
```
genderqueer
```
```
emoji
```
```
genderqueer
```
```
emoji
```
```
polysexual
```
```
emoji
```
```
polysexual
```
```
emoji
```
```
polyamorous
```
```
emoji
```
```
polyamorous
```
```
blockquote
```
```
twitterLink
```
```
emoji
```
```
lesbian
```
```
box
```
```
twitterContainer
```
```
twitterPFP
```
```
twitterUsername
```
```
twitterName
```
```
twitterNameLink
```
```
twitterOptions
```
```
twitterBody
```
```
twitterNumbers
```

[[iftags +component]]

[[module css]]
.box {
    border: solid 1px black;
    margin: 10px;
    padding: 10px;
}
.emoji {
    width: 1.4rem;
    height: 1.2rem;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: transparent;
}
.pride {
    background-image:
    	linear-gradient(to bottom,
    		#ff000e 0 calc(1.2rem / 6),
    		#ff7300 calc(1.2rem / 6) calc(1.2rem / 6 * 2),
    		#fad220 calc(1.2rem / 6 * 2) calc(1.2rem / 6 * 3),
    		#138f3e calc(1.2rem / 6 * 3) calc(1.2rem / 6 * 4),
    		#3558a0 calc(1.2rem / 6 * 4) calc(1.2rem / 6 * 5),
    		#880082 calc(1.2rem / 6 * 5) 100%);
}
.trans {
    background-image:
    	linear-gradient(to bottom,
    		#5ccefa 0 20%, 
    		#f6a8b7 20% 40%, 
    		#fff 40% 60%, 
    		#f6a8b7 60% 80%, 
    		#5ccefa 80% 100%);
}
.gay {
    background-image:
    	linear-gradient(to bottom,
    		#007c6b 0 calc(1.2rem / 7),
    		#40a4a5 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#59c8d2 calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#7aade0 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#0b83c9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#04336f calc(1.2rem / 7 * 6) 100%);
}
.lesbian {
    background-image:
    	linear-gradient(to bottom,
    		#d82c01 0 calc(1.2rem / 7),
    		#f1752c calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#ff985b calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#d162a3 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b75591 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#a60260 calc(1.2rem / 7 * 6) 100%);
}
.bi {
    background-image:
    	linear-gradient(to bottom,
    		#c1357e 0 40%,
    		#675997 40% 60%,
    		#0655a9 60% 100%);
}
.nonbinary {
    background-image:
    	linear-gradient(to bottom,
    		#f7e45a 0 25%,
    		#f9fbfc 25% 50%,
    		#675997 50% 75%,
    		#222222 75% 100%);
}
.asexual {
    background-image:
    	linear-gradient(to bottom,
    		#222222 0 20%,
    		#a2a2a2 20% 40%,
    		#f9fbfc 40% 60%,
    		#a148a2 60% 80%,
    		#222222 80% 100%);
}
.pan {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#ffba00 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.intersex {
    background-image:
    	repeating-radial-gradient(circle at center,
    		#ffba00 0 30%,
    		#675997 30% 40%,
    		#ffba00 40% 100%);
}
.genderfluid {
    background-image:
    	linear-gradient(to bottom,
    		#f39ec1 0 20%,
    		#f9fbfc 20% 40%,
    		#a74a95 40% 60%,
    		#000 60% 80%,
    		#0068b5 80% 100%);
}
.agender {
    background-image:
    	linear-gradient(to bottom,
    		#000000 0 calc(1.2rem / 7),
    		#b9b9b9 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#fff calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#b8f58a calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#fff calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b9b9b9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#000000 calc(1.2rem / 7 * 6) 100%);
}
.aroace {
    background-image:
    	linear-gradient(to bottom,
    		#e68222 0 20%,
    		#eec62d 20% 40%,
    		#fff 40% 60%,
    		#49a6d5 60% 80%,
    		#1c304b 80% 100%);
}
.aromantic {
    background-image:
    	linear-gradient(to bottom,
    		#3AA640 0 20%,
    		#A8D47A 20% 40%,
    		#fff 40% 60%,
    		#AAABAB 60% 80%,
    		#000 80% 100%);
}
.omnigender {
    background-image:
    	linear-gradient(to bottom,
    		#ff92c5 0 20%,
    		#ff4ab3 20% 40%,
    		#24033c 40% 60%,
    		#5855f8 60% 80%,
    		#7b9dfb 80% 100%);
}
.omnisexual {
    background-image:
    	linear-gradient(to bottom,
    		#ffb0ca 0 20%,
    		#c9c0e8 20% 40%,
    		#a447a5 40% 60%,
    		#7193bf 60% 80%,
    		#9adaeb 80% 100%);
}
.genderqueer {
    background-image:
    	linear-gradient(to bottom,
    		#b390d6 0 calc(1.2rem / 3),
    		#fff calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#5d8437 calc(1.2rem / 3 * 2) 100%);
}
.polysexual {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#44cc70 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.polyamorous {
    background-image:
    	linear-gradient(to bottom,
    		#0808ff 0 calc(1.2rem / 3),
    		#ff0808 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#080808 calc(1.2rem / 3 * 2) 100%);
}

.twitterLink {
    color: #1d9bf9;
}
.twitterLink::before{
    content: "@";
}
.twitterLink:hover {
    text-decoration: underline;
    cursor: pointer;
}
[[/module]]

[[>]]
[[module rate]]
[[/>]]
[[include :scp-wiki:component:author-label-source start=--
|name=Fish^12]]
First component. [https://scp-wiki.wikidot.com/hotfish| Author Page].
[[include :scp-wiki:component:author-label-source end=--]]

[[=]]
+ EXAMPLE
[[/=]]

[[image test.png]]

[[=]]
[[collapsible show="Example Source" hide="Example Source"]]
[[/=]]

[[div class="blockquote"]]
[[<]]
@@[[include :scp-wiki:component:generic-social-media-post start=--@@
@@|pfp= https://www.wikidot.com/avatar.php?userid=7495715&amp;size=small&amp;timestamp=1771699807@@
@@|name= Fish^12@@
@@|atname= fishtwelve@@
@@]]@@

What the fuck did you just fucking say about me, the little bitch? I'll have you know I graduated top of my class in the Navy Seals, and I've been involved in numerous secret raids on Al-Quaeda, and I have over 300 confirmed kills. I am trained in gorilla warfare

@@[[include :scp-wiki:component:generic-social-media-post end=--@@
@@|time= 8:10 PM@@
@@|date= 2/21/2026@@
@@|views= 12@@
@@|comments= 12@@
@@|quotes= 12@@
@@|likes= 12@@
@@]]@@
[[/<]]
[[/div]]

[[/collapsible]]

@@ @@

[[=]]
+ HOW DO IT WORK?
[[/=]]

[[div class="box"]]

++ Step 1: Source

Add this to the top of your page. __This only needs to happen once.__

> @@[[include :scp-wiki:component:generic-social-media-post code=--]]@@

[[/div]]

[[div class="box"]]

++ Step 2: Beginning

This is the start of your post. You will have to do this every time you add a new post.

> @@[[include :scp-wiki:component:generic-social-media-post start=--@@
> @@|pfp=@@
> @@|name=@@
> @@|atname=@@
> @@]]@@

The {{pfp}} takes an image url. Please make sure the image is licensing compliant and small. 100px by 100px at most.

The {{atname}} comes with an @ built-in, you do not need to include it.

[[/div]]

[[div class="box"]]

++ Step 3: Middle

The space between the start and end of the post. You can do whatever you want here.

There is also a selection of custom formatting available to you, listed below.

||~ Input ||~ Output ||
||= @@[[span class="twitterLink"]]dril[[/span]]@@ ||= [[span class="twitterLink"]]dril[[/span]] ||
||= @@[[span class="emoji pride"]].[[/span]]@@ ||= [[span class="emoji pride"]].[[/span]] ||
||= @@[[span class="emoji trans"]].[[/span]]@@ ||= [[span class="emoji trans"]].[[/span]] ||
||= @@[[span class="emoji gay"]].[[/span]]@@ ||= [[span class="emoji gay"]].[[/span]] ||
||= @@[[span class="emoji lesbian"]].[[/span]]@@ ||= [[span class="emoji lesbian"]].[[/span]] ||
||= @@[[span class="emoji bi"]].[[/span]]@@ ||= [[span class="emoji bi"]].[[/span]] ||
||= @@[[span class="emoji nonbinary"]].[[/span]]@@ ||= [[span class="emoji nonbinary"]].[[/span]] ||
||= @@[[span class="emoji asexual"]].[[/span]]@@ ||= [[span class="emoji asexual"]].[[/span]] ||
||= @@[[span class="emoji pan"]].[[/span]]@@ ||= [[span class="emoji pan"]].[[/span]] ||
||= @@[[span class="emoji intersex"]].[[/span]]@@ ||= [[span class="emoji intersex"]].[[/span]] ||
||= @@[[span class="emoji genderfluid"]].[[/span]]@@ ||= [[span class="emoji genderfluid"]].[[/span]] ||
||= @@[[span class="emoji agender"]].[[/span]]@@ ||= [[span class="emoji agender"]].[[/span]] ||
||= @@[[span class="emoji aroace"]].[[/span]]@@ ||= [[span class="emoji aroace"]].[[/span]] ||
||= @@[[span class="emoji aromantic"]].[[/span]]@@ ||= [[span class="emoji aromantic"]].[[/span]] ||
||= @@[[span class="emoji omnigender"]].[[/span]]@@ ||= [[span class="emoji omnigender"]].[[/span]] ||
||= @@[[span class="emoji omnisexual"]].[[/span]]@@ ||= [[span class="emoji omnisexual"]].[[/span]] ||
||= @@[[span class="emoji genderqueer"]].[[/span]]@@ ||= [[span class="emoji genderqueer"]].[[/span]] ||
||= @@[[span class="emoji polysexual"]].[[/span]]@@ ||= [[span class="emoji polysexual"]].[[/span]] ||
||= @@[[span class="emoji polyamorous"]].[[/span]]@@ ||= [[span class="emoji polyamorous"]].[[/span]] ||

Here they are in use.

[[image test2.png]]

[[=]]
[[collapsible show="Example Source" hide="Example Source"]]
[[/=]]

[[div class="blockquote"]]
[[<]]
@@[[include :scp-wiki:component:generic-social-media-post start=--@@
@@|pfp= https://www.wikidot.com/avatar.php?userid=7495715&amp;size=small&amp;timestamp=1771699807@@
@@|name= Fish^12@@
@@|atname= fishtwelve@@
@@]]@@

@@[[span class="twitterLink"]]ChappellRoan[[/span]] i very much enjoyed pink pony club, but i have a question, what country is this from [[span class="emoji lesbian"]].[[/span]] and why are there so many girls there@@

@@[[include :scp-wiki:component:generic-social-media-post end=--@@
@@|time= 8:10 PM@@
@@|date= 2/21/2026@@
@@|views= 12@@
@@|comments= 12@@
@@|quotes= 12@@
@@|likes= 12@@
@@]]@@
[[/<]]
[[/div]]

[[/collapsible]]

Besides that, you can do whatever you want here. Go crazy.

[[/div]]

[[div class="box"]]

++ Step 4: End

This is the end of your post. Use it to enclose the body post.

> @@[[include :scp-wiki:component:generic-social-media-post end=--@@
> @@|time=@@
> @@|date=@@
> @@|views=@@
> @@|comments=@@
> @@|quotes=@@
> @@|likes=@@
> @@]]@@

[[/div]]

[[/iftags]]



[[iftags -component]]

[!-- {$code}]
[[module css]]

/* Top Half Formatting */

.twitterContainer {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 1rem;
    border-radius: 1rem;
    background: white;
    padding: 1rem;
}
.twitterContainer img {
    border-radius: 1rem;
    width: 100%;
}
.twitterContainer table {
    width: 100%;
}
.twitterPFP {
    width: 3rem;
}
.twitterPFP img {
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1;
}
.twitterUsername {
    padding-left: 8px;
}
.twitterName {
    font-weight: bold;
}
.twitterNameLink {
    color: #778088;
}
.twitterNameLink::before, .twitterLink::before {
    content: "@";
}
.twitterOptions {
    font-weight: bold;
    text-align: right;
}
.twitterUsername p, .twitterNumbers p {
    margin-block-start: 0;
    margin-block-end: 0;
}
.twitterContainer .image-container {
    padding: 0;
}
.twitterBody {
    font-size: 1.1rem;
}
.twitterBody p:first-child {
    margin-block-start: 0;
}
.twitterBody p:last-child {
    margin-block-end: 0;
}

.twitterLink {
    color: #1d9bf9;
}
.twitterLink:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Emoji Formatting */

.emoji {
    width: 1.4rem;
    height: 1.2rem;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: transparent;
    margin: 0 2px;
}
.pride {
    background-image:
    	linear-gradient(to bottom,
    		#ff000e 0 calc(1.2rem / 6),
    		#ff7300 calc(1.2rem / 6) calc(1.2rem / 6 * 2),
    		#fad220 calc(1.2rem / 6 * 2) calc(1.2rem / 6 * 3),
    		#138f3e calc(1.2rem / 6 * 3) calc(1.2rem / 6 * 4),
    		#3558a0 calc(1.2rem / 6 * 4) calc(1.2rem / 6 * 5),
    		#880082 calc(1.2rem / 6 * 5) 100%);
}
.trans {
    background-image:
    	linear-gradient(to bottom,
    		#5ccefa 0 20%, 
    		#f6a8b7 20% 40%, 
    		#fff 40% 60%, 
    		#f6a8b7 60% 80%, 
    		#5ccefa 80% 100%);
}
.gay {
    background-image:
    	linear-gradient(to bottom,
    		#007c6b 0 calc(1.2rem / 7),
    		#40a4a5 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#59c8d2 calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#7aade0 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#0b83c9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#04336f calc(1.2rem / 7 * 6) 100%);
}
.lesbian {
    background-image:
    	linear-gradient(to bottom,
    		#d82c01 0 calc(1.2rem / 7),
    		#f1752c calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#ff985b calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#fefefe calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#d162a3 calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b75591 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#a60260 calc(1.2rem / 7 * 6) 100%);
}
.bi {
    background-image:
    	linear-gradient(to bottom,
    		#c1357e 0 40%,
    		#675997 40% 60%,
    		#0655a9 60% 100%);
}
.nonbinary {
    background-image:
    	linear-gradient(to bottom,
    		#f7e45a 0 25%,
    		#f9fbfc 25% 50%,
    		#675997 50% 75%,
    		#222222 75% 100%);
}
.asexual {
    background-image:
    	linear-gradient(to bottom,
    		#222222 0 20%,
    		#a2a2a2 20% 40%,
    		#f9fbfc 40% 60%,
    		#a148a2 60% 80%,
    		#222222 80% 100%);
}
.pan {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#ffba00 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.intersex {
    background-image:
    	repeating-radial-gradient(circle at center,
    		#ffba00 0 30%,
    		#675997 30% 40%,
    		#ffba00 40% 100%);
}
.genderfluid {
    background-image:
    	linear-gradient(to bottom,
    		#f39ec1 0 20%,
    		#f9fbfc 20% 40%,
    		#a74a95 40% 60%,
    		#000 60% 80%,
    		#0068b5 80% 100%);
}
.agender {
    background-image:
    	linear-gradient(to bottom,
    		#000000 0 calc(1.2rem / 7),
    		#b9b9b9 calc(1.2rem / 7) calc(1.2rem / 7 * 2),
    		#fff calc(1.2rem / 7 * 2) calc(1.2rem / 7 * 3),
    		#b8f58a calc(1.2rem / 7 * 3) calc(1.2rem / 7 * 4),
    		#fff calc(1.2rem / 7 * 4) calc(1.2rem / 7 * 5),
    		#b9b9b9 calc(1.2rem / 7 * 5) calc(1.2rem / 7 * 6),
    		#000000 calc(1.2rem / 7 * 6) 100%);
}
.aroace {
    background-image:
    	linear-gradient(to bottom,
    		#e68222 0 20%,
    		#eec62d 20% 40%,
    		#fff 40% 60%,
    		#49a6d5 60% 80%,
    		#1c304b 80% 100%);
}
.aromantic {
    background-image:
    	linear-gradient(to bottom,
    		#3AA640 0 20%,
    		#A8D47A 20% 40%,
    		#fff 40% 60%,
    		#AAABAB 60% 80%,
    		#000 80% 100%);
}
.omnigender {
    background-image:
    	linear-gradient(to bottom,
    		#ff92c5 0 20%,
    		#ff4ab3 20% 40%,
    		#24033c 40% 60%,
    		#5855f8 60% 80%,
    		#7b9dfb 80% 100%);
}
.omnisexual {
    background-image:
    	linear-gradient(to bottom,
    		#ffb0ca 0 20%,
    		#c9c0e8 20% 40%,
    		#a447a5 40% 60%,
    		#7193bf 60% 80%,
    		#9adaeb 80% 100%);
}
.genderqueer {
    background-image:
    	linear-gradient(to bottom,
    		#b390d6 0 calc(1.2rem / 3),
    		#fff calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#5d8437 calc(1.2rem / 3 * 2) 100%);
}
.polysexual {
    background-image:
    	linear-gradient(to bottom,
    		#ea38aa 0 calc(1.2rem / 3),
    		#44cc70 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#2188e8 calc(1.2rem / 3 * 2) 100%);
}
.polyamorous {
    background-image:
    	linear-gradient(to bottom,
    		#0808ff 0 calc(1.2rem / 3),
    		#ff0808 calc(1.2rem / 3) calc(1.2rem / 3 * 2),
    		#080808 calc(1.2rem / 3 * 2) 100%);
}

/* Bottom Half Formatting */

.twitterNumbers {
    font-size: 0.8rem;
    margin-top: 1rem;
}
.twitterBorder {
    border-top: solid 1px #d5d5d5;
    border-bottom: solid 1px #d5d5d5;
}
.twitterCell {
    width: 25%;
}
[[/module]]
[!-- --]

[!-- {$start}]
[[div class="twitterContainer"]]
[[table]]
[[row]]
[[cell class="twitterPFP"]]
[[image {$pfp}]]
[[/cell]]
[[cell class="twitterUsername"]]
[[span class="twitterName"]]{$name}[[/span]]
[[span class="twitterNameLink"]]{$atname}[[/span]]
[[/cell]]
[[cell class="twitterOptions"]]
•••
[[/cell]]
[[/row]]
[[/table]]
[[div class="twitterBody"]]
[!-- --]

[!-- {$end}]
[[/div]]
[[div class="twitterNumbers"]]
##778088|{$time} · {$date} ·## **{$views}** ##778088|Views##
[[size 90%]]**{$comments}** ##778088|Comments ·## **{$quotes}** ##778088|Quotes ·## **{$likes}** ##778088|Likes##[[/size]]
[[/div]]
[[/div]]
[!-- --]

[[/iftags]]

Generic Social Media Post Component

Module Styles

Inline Styles

Includes

CSS Classes

Page Source