Multiple cards in a row not spacing as expected - vmware-clarity

Question

I've been experimenting with some of the sample code in the documentation, and in particular laying out three cards in a row.
When I cut'n paste the code into my component page I'm not getting the expected outcome.
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
<div class="branding">
<a href="" class="nav-link">
<img alt="" src="assets/logo2.png" height="60">
<span class="title">Good day</span>
</a>
</div>
<div class="header-actions"></div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<clr-dropdown>
<button class="nav-text" clrDropdownTrigger aria-label="open user profile">
john.doe#vmware.com
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</header>
<div class="content-container">
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</div>
</div>
</div>
</div>
I was expecting three equally sized cards across the web page. Instead I get...
Do I need to install Bootstrap for this to work?
TIA

Answer 1

You are almost there, you are missing one important element in your page structure. The Cards are good, but you need to add <div class="content-area"> just inside of your <div class="content-container"> element.
<div class="content-container">
<div class="content-area"> <!-- THIS IS MISSING -->
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</div>
</div>