wikipedia style card

For my Ovid shrine, I wanted to include a bit from Wikipedia^[1] about who Ovid was, just for context. I could have just done one of my normal box or card divs with an attribution note, but I wanted the sort of instant this-is-from-Wikipedia-the-free-encyclopaedia vibes you get from seeing a Wikipedia screenshot. Like, the style is so simple and so recognizable all at once.

However, pictures of text are contraindicated for accessibility reasons. I could have done a screenshot with a really long alt text, but I didn't love the idea. So, being entirely sensible and not at all unhinged, I decided I'd just create a new class of divs and use the Firefox dev tools to steal Wikipedia's look.

Like so:

code

css

/* WIKIPEDIA STYLE */
.wiki {
	font-family: sans-serif;
	font-size: 0.875rem;
	line-height: 1.5714285;
	background-color: white;
	color: #202122; 
	padding: 1em;
	margin: 1em 0;

	:first-child {
		margin-top: 0;
	}

	:last-child {
		margin-bottom: 0;
	}

	a:link {
		color: #36c;
	}

	a:visited {
		color: #795cb2;
	}

	a:hover{
		text-decoration: underline;
		background-color: transparent;
	}

	.title {
		font-size: 1.8em;
		font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
		font-weight: normal;
		line-height: 1.375;
		background-color: transparent;
		text-transform: none;
		text-align: left;
		border-radius: 0;
		color: #000;
		border-bottom: 1px solid #a2a9b1;
	}

	.disambiguation {
		padding-left: 1.6em;
		margin-bottom: 0.5em;
		font-style: italic;
	}
}

example html

<div class="wiki">
<p class="title">Title</p>
<p>From Wikipedia, the free encyclopedia</p>
<p class="disambiguation">This article is an example. Disambiguation note here.</p>
<p><b>Wikipedia</b><sup><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-5">[note 3]</a></sup> is a <a href="https://en.wikipedia.org/wiki/Free_content" title="Free content">free content</a> <a href="https://en.wikipedia.org/wiki/Online_encyclopedia" title="Online encyclopedia">online encyclopedia</a> written and maintained by a community of <a href="https://en.wikipedia.org/wiki/Volunteering" title="Volunteering">volunteers</a>, known as <a href="https://en.wikipedia.org/wiki/Wikipedians" title="Wikipedians">Wikipedians</a>, through <a href="https://en.wikipedia.org/wiki/Open_collaboration" title="Open collaboration">open collaboration</a> and the use of the <a href="https://en.wikipedia.org/wiki/Wiki" title="Wiki">wiki</a>-based editing system <a href="https://en.wikipedia.org/wiki/MediaWiki" title="MediaWiki">MediaWiki</a>.</p>
</div>

other notes

• So you can get the text from Wikipedia by copying the text normally and adding the styles manually, but it is way easier to use your browser's dev tools to just copy the HTML source code straight from the source. You'll still have to make some adjustments (for example, all the links are relative, so you'll have to add in the Wikipedia URLs), but it's still much quicker than doing it all by hand.^[2]
• I personally have two additional lines to round the corners (border-radius: 0.5rem;) and add a border in my site's accent color (which uses variables but is essentially border: 0.1rem solid #E4A21D;), just to make it match my site's style a tad better.
• This is not enough HTML to build a full site style based on Wikipedia, but it sure is a start (<- a project I am not allowing myself to consider at the moment).

1. Well, what I really wanted was to inclue a bit from the Oxford Classical Dictionary, but their entry on Ovid, while delightful, is not concise, so Wikipedia it was.^{^}
2. I say, having done it all by hand at least twice before I realized this.^{^}