First attempt adding a quick start section to HelloThere

editions/tw5.com/tiddlers/definitions/Xememex.tid

@@ -0,0 +1,11 @@
+title: Xememex
+tags: Definitions
+
+
+Xememex is a multi-user implementation of TiddlyWiki from Federatial.
+
+Xememex is highly scalable. The largest current implementation supports hundreds of online wikis with thousands of users.
+
+Xememex is cost effective. Xememex runs as a serverless application on Amazon Web Services. Federatial deploy and manage custom instances of Xememex using the clients own AWS account, giving clients full visibility of usage and operating costs.
+
+Xememex is currently only available under commercial terms from Federatial. Contact jeremy@federatial.com for more details.

editions/tw5.com/tiddlers/hellothere/HelloThere.tid

@@ -5,12 +5,20 @@ tags: TableOfContents
 title: HelloThere
 type: text/vnd.tiddlywiki
 
-!! ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
+!!.tc-hero-heading ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
 
 Use it to keep your [[to-do list|TaskManagementExample]], to plan an [[essay or novel|"TiddlyWiki for Scholars" by Alberto Molina]], or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.
 
 Unlike conventional online services, TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will [[still be able to use|Future Proof]] the notes you take today.
 
+!! ''Quick Start''
+
+<div class="tc-cards tc-cards-vertical">
+<$list filter="[tag[Quick Start]]">
+<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}}  backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
+</$list>
+</div>
+
 !! ''Find Out More''
 
 <div class="tc-cards">

editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid

@@ -0,0 +1,2 @@
+title: Quick Start
+list: [[Quick Start: Online]] [[Quick Start: Desktop]] [[Quick Start: Xememex]]

editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid

@@ -0,0 +1,7 @@
+title: Quick Start: Desktop
+tags: [[Quick Start]]
+caption: DESKTOP {{$:/core/images/storyview-zoomin}}
+background-color: #9de1a5
+link: TiddlyDesktop
+
+Download the official desktop application for macOS, Windows and Linux

editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid

@@ -0,0 +1,7 @@
+title: Quick Start: DIY
+tags: [[Quick Start]]
+caption: DIY {{$:/core/images/theme-button}}
+background-color: #ecc2ba
+link: GettingStarted
+
+Explore the options to find the configuration of ~TiddlyWiki that is right for you

editions/tw5.com/tiddlers/hellothere/quickstart/online.tid

@@ -0,0 +1,8 @@
+title: Quick Start: Online
+tags: [[Quick Start]]
+caption: ONLINE {{$:/core/images/globe}}
+background-color: #c3d3ff
+background: linear-gradient(90deg,#c3d3ff, #ffffff)
+link: Tiddlyhost
+
+Create an account with Tiddlyhost for online wikis that can be private or public

editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid

@@ -0,0 +1,7 @@
+title: Quick Start: Xememex
+tags: [[Quick Start]]
+caption: COMMERCIAL {{$:/core/images/star-filled}}
+background-color: #e9c1f1
+link: Xememex
+
+Xememex is the commercial multiuser serverless implementation of ~TiddlyWiki from Federatial

editions/tw5.com/tiddlers/system/tw5.com-styles.tid

@@ -6,6 +6,10 @@ type: text/vnd.tiddlywiki
 
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
 
+.tc-hero-heading a.tc-tiddlylink {
+	font-weight: bold;
+}
+
 .tc-double-spaced-list li {
 	padding-bottom: .5em;
 	padding-top: .5em;
@@ -78,8 +82,6 @@ type: text/vnd.tiddlywiki
 	height: 1em;
 }
 
-
-
 .tc-wrapper-flex {
 	display: flex;
 }
@@ -134,32 +136,33 @@ type: text/vnd.tiddlywiki
 .tc-cards {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: space-evenly;
+	justify-content: flex-start;
 	width: 100%;
-	padding: 0.5em;
-	background: <<colour background>>;
-	border-color: rgba(34,36,38,.15);
-	box-shadow: 0 2px 25px 0 rgb(34 36 38 / 5%) inset;
+	gap: 1em;
+}
+
+.tc-cards.tc-cards-vertical {
+	flex-direction: column;
 }
 
 .tc-tiddlylink.tc-card {
 	font-weight: normal;
 	max-width: 100%;
 	position: relative;
-	display: flex;
-	flex-direction: column;
 	background: <<colour background>>;
 	color: <<colour foreground>>;
 	width: 200px;
 	min-height: 0;
-	padding: 0 0 0.5em 0;
-	margin: 0.5em;
 	border: none;
 	border-radius: 8px;
 	box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
 	transition: box-shadow 0.3s ease,transform .3s ease;
 }
 
+.tc-cards.tc-cards-vertical .tc-tiddlylink.tc-card {
+	width: 100%;
+}
+
 @media (max-width: 500px) {
 	
 	.tc-cards {
@@ -180,8 +183,17 @@ type: text/vnd.tiddlywiki
 }
 
 .tc-card-accent {
-	border-top-left-radius: 8px;
-	border-top-right-radius: 8px;
+	height: 100%;
+	display: flex;
+	align-items: stretch;
+	flex-direction: column;
+	justify-content: stretch;
+	border-radius: 8px;
+}
+
+.tc-cards.tc-cards-vertical .tc-card-accent {
+	flex-direction: row;
+	align-items: baseline;
 }
 
 .tc-tiddlylink.tc-card:hover {
@@ -233,6 +245,8 @@ type: text/vnd.tiddlywiki
 }
 
 .tc-card-image {
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
 	line-height: 0;
 	overflow: hidden;
 }
@@ -254,7 +268,19 @@ type: text/vnd.tiddlywiki
 	font-weight: 600;
 	transition: color 0.3s ease-in-out;
 	padding: 0 10px;
-	margin: 0.5em 0;
+	margin: 0.5em 0 0.25em 0;
+}
+
+.tc-cards.tc-cards-vertical .tc-card-title {
+	font-size: 1em;
+	min-width: 10em;
+	text-align: right;
+}
+
+.tc-cards.tc-cards-vertical .tc-card-title svg {
+	width: 1em;
+	height: 1em;
+	vertical-align: text-bottom;
 }
 
 .tc-card-subtitle,
@@ -270,12 +296,17 @@ type: text/vnd.tiddlywiki
 .tc-card-body {
 	font-size: 0.9em;
 	line-height: 1.2;
-	padding: 0 10px;
+	padding: 0.25em 10px;
 	margin: 0;
 }
 
+.tc-cards.tc-cards-vertical .tc-card-body {
+	font-size: 1em;
+}
+
 .tc-card-body-wrapper {
 	position: relative;
+	flex-grow: 1;
 }
 
 .tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:before {

editions/tw5.com/tiddlers/system/wikitext-macros.tid

@@ -95,10 +95,10 @@ That renders as:
 <<tw-code $tiddler$>>
 \end
 
-\define flex-card(class,bordercolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
+\define flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
 \whitespace trim
 <$link class={{{ [<__class__>addprefix[tc-card ]] }}} to={{{ [<currentTiddler>get<__linkField__>else<currentTiddler>] }}}>
-	<div class="tc-card-accent" style.borderTop={{{ [<__bordercolor__>!is[blank]addprefix[5px solid ]] }}}>
+	<div class="tc-card-accent" style.borderTop={{{ [<__bordercolor__>!is[blank]addprefix[5px solid ]] }}} style.backgroundColor=<<__backgroundcolor__>> style.color=<<__textcolor__>> style.fill=<<__textcolor__>>>
 		<$list filter="[<currentTiddler>has[ribbon-text]]" variable="ignore">
 			<div class="tc-card-ribbon-wrapper">
 				<div class="tc-card-ribbon" style.backgroundColor={{{ [<currentTiddler>get[ribbon-color]else[red]] }}}>