Infobox template

Infoboxes are an extremely important part of the wiki experience, adding visual interest on the right side of the screen, and increasing the information density on the page in a non-overwhelming format.

Pictured below is the infobox on the Calgary page on Wikipedia

Discourse’s editor allows inline HTML, but it’s not as simple as pasting in the infobox HTML from Wikipedia. It has to align to the right side of the screen, with CSS that makes it look good, and scripts that align the photo content within it.

Click to reveal what the HTML from Calgary's infobox looks like when directly imported into Discourse
Calgary
City of Calgary
.mw-parser-output .tmulti .multiimageinner{display:flex;flex-direction:column}.mw-parser-output .tmulti .trow{display:flex;flex-direction:row;clear:left;flex-wrap:wrap;width:100%;box-sizing:border-box}.mw-parser-output .tmulti .tsingle{margin:1px;float:left}.mw-parser-output .tmulti .theader{clear:both;font-weight:bold;text-align:center;align-self:center;background-color:transparent;width:100%}.mw-parser-output .tmulti .thumbcaption{background-color:transparent}.mw-parser-output .tmulti .text-align-left{text-align:left}.mw-parser-output .tmulti .text-align-right{text-align:right}.mw-parser-output .tmulti .text-align-center{text-align:center}@media all and (max-width:720px){.mw-parser-output .tmulti .thumbinner{width:100%!important;box-sizing:border-box;max-width:none!important;align-items:center}.mw-parser-output .tmulti .trow{justify-content:center}.mw-parser-output .tmulti .tsingle{float:none!important;max-width:100%!important;box-sizing:border-box;text-align:center}.mw-parser-output .tmulti .tsingle .thumbcaption{text-align:left}.mw-parser-output .tmulti .trow>.thumbcaption{text-align:center}}
.mw-parser-output .ib-settlement-cols{text-align:center;display:table;width:100%}.mw-parser-output .ib-settlement-cols-row{display:table-row}.mw-parser-output .ib-settlement-cols-cell{display:table-cell;vertical-align:middle}.mw-parser-output .ib-settlement-cols-cellt{display:table-cell;vertical-align:top}
Nicknames: 
The Stampede City, Cowtown, Mohkínstsis, Wichispa Oyade, Guts'ists'i more...[1][2]
Motto: 
Onward
Map
Interactive map of Calgary
.mw-parser-output .locmap .od{position:absolute}.mw-parser-output .locmap .id{position:absolute;line-height:0}.mw-parser-output .locmap .l0{font-size:0;position:absolute}.mw-parser-output .locmap .pv{line-height:110%;position:absolute;text-align:center}.mw-parser-output .locmap .pl{line-height:110%;position:absolute;top:-0.75em;text-align:right}.mw-parser-output .locmap .pr{line-height:110%;position:absolute;top:-0.75em;text-align:left}.mw-parser-output .locmap .pv>div{display:inline;padding:1px}.mw-parser-output .locmap .pl>div{display:inline;padding:1px;float:right}.mw-parser-output .locmap .pr>div{display:inline;padding:1px;float:left}html.skin-theme-clientpref-night .mw-parser-output .od,html.skin-theme-clientpref-night .mw-parser-output .od .pv>div,html.skin-theme-clientpref-night .mw-parser-output .od .pl>div,html.skin-theme-clientpref-night .mw-parser-output .od .pr>div{background:#fff!important;color:#000!important}html.skin-theme-clientpref-night .mw-parser-output .locmap{filter:grayscale(0.6)}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .locmap{filter:grayscale(0.6)}html.skin-theme-clientpref-os .mw-parser-output .od,html.skin-theme-clientpref-os .mw-parser-output .od .pv>div,html.skin-theme-clientpref-os .mw-parser-output .od .pl>div,html.skin-theme-clientpref-os .mw-parser-output .od .pr>div{background:white!important;color:#000!important}}html.skin-theme-clientpref-night .mw-parser-output .infobox-full-data .locmap div{background:transparent!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox-full-data .locmap div{background:transparent!important}}
Calgary is located in Canada
Calgary
Calgary
Location within Canada
Calgary is located in Alberta
Calgary
Calgary
Location within Alberta
Show map of CanadaShow map of AlbertaShow all
Coordinates: .mw-parser-output .geo-default,.mw-parser-output .geo-dms,.mw-parser-output .geo-dec{display:inline}.mw-parser-output .geo-nondefault,.mw-parser-output .geo-multi-punct,.mw-parser-output .geo-inline-hidden{display:none}.mw-parser-output .longitude,.mw-parser-output .latitude{white-space:nowrap}51°3′N 114°4′W / 51.050°N 114.067°W / 51.050; -114.067
CountryCanada
ProvinceAlberta
RegionCalgary Metropolitan Region
Census division6
Municipal districtsRocky View County and Foothills County
Founded1875
Incorporated[3] 
 • TownNovember 7, 1884
 • CityJanuary 1, 1894
Named forCalgary, Mull
Government
 • BodyCalgary City Council
 • MayorJyoti Gondek
 • ManagerDavid Duckworth[4]
Area
 (2021)[5]
 • Land820.62 km2 (316.84 sq mi)
 • Urban
621.72 km2 (240.05 sq mi)
 • Metro
5,098.68 km2 (1,968.61 sq mi)
Elevation1,045 m (3,428 ft)
Population
 (2021)[5][7][8]
 • City1,306,784 (3rd)
 • Density1,592.4/km2 (4,124/sq mi)
 • Urban
1,305,550 (4th)
 • Urban density2,099.9/km2 (5,439/sq mi)
 • Metro
1,481,806 (5th)
 • Metro density290.6/km2 (753/sq mi)
DemonymCalgarian
Time zoneUTC−07:00 (MST)
 • Summer (DST)UTC−06:00 (MDT)
FSAs
Area code(s)403, 587, 825, 368
NTS Map082O01
GNBC CodeIAKID
GDP (Calgary CMA)CA$102.66 billion (2020)[9]
GDP per capita (Calgary CMA)CA$79,885 (2022)[10]
Websitecalgary.ca Edit this at Wikidata

Not horrible actually. It handles the table parts quite well. But the sizing is all wrong, the images are totally broken, and I’m not sure how we can make all of this align to the right in a simple template.