<commit_before>/*doc
---
title: Cards
name: uiCard
category: UI Components
---
Card-like boxes.

## Standard, Group, and Event cards
(This example uses `gridList`, but cards may placed anywhere)

```html_example
<section class="stripe--collection">
	<div class="bounds">
		<ul class="gridList gridList--has1 atMedium_gridList--has3">

			<!-- Base card styles -->
			<li>
				<div class="card">
					<h4>Look at this card</h4>
					<p>Just <em>look at it</em></p>
				</div>
			</li>

			<!-- Group card -->
			<li>
				<div class="card inverted" style="background-image: url(http://photos4.meetupstatic.com/photos/event/7/6/f/8/600_434010456.jpeg);">
					<h4>I'm a group card</h4>
				</div>
			</li>

			<!-- Event card -->
			<li>
				<div class="card card--event">
					<h4>I'm an event card</h4>
				</div>
			</li>
		</ul>
	</div>
</section>
```

### Event card detail
An example of a full event card recipie using
`.card` with other existing Sassquatch2 components.


_(The inline style on the card element is for documentation purposes only)_

```html_example
<section class="stripe--collection">
	<a href="#" class="chunk card card--event" style="margin: 16px; max-width: 250px;">

		<div class="row row--spaceBetween row--wrap">

			<time datetime="20150221" class="row-item row-item--shrink">
				<h2 class="text--graphic display--inlineBlock">21</h2>
				<h2>Feb</h2>
			</time>

			<div class="row-item row-item--shrink align--right">
				<p class="text--caption">No spots left</p>
			</div>

		</div>

		<div class="chunk eventInfo-primary">
			<p class="wrap--singleLine--truncate chunk text--secondary">Saturday at 2:00 pm</p>

			<h3>Backpacking For Beginners</h3>

			<ul class="inlineblockList matchLineHeight">
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="text--caption">+8</li>
			</ul>
		</div>
	</a>
	<a href="#" class="chunk card card--event card--event--featured" style="margin: 16px; max-width: 250px;">

		<div class="row row--spaceBetween row--wrap">

			<time datetime="20150221" class="row-item row-item--shrink">
				<h2 class="text--graphic display--inlineBlock">21</h2>
				<h2>Feb</h2>
			</time>

			<div class="row-item row-item--shrink align--right">
				<p class="text--caption">Featured</p>
			</div>

		</div>

		<div class="chunk eventInfo-primary">
			<p class="wrap--singleLine--truncate chunk text--secondary">Saturday at 2:00 pm</p>

			<h3>Backpacking For Beginners</h3>

			<ul class="inlineblockList matchLineHeight">
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="text--caption">+8</li>
			</ul>
		</div>
	</a>
	<a href="#" class="chunk card card--event card--event--canceled" style="margin: 16px; max-width: 250px;">

		<div class="row row--spaceBetween row--wrap">

			<time datetime="20150221" class="row-item row-item--shrink">
				<h2 class="text--graphic display--inlineBlock">21</h2>
				<h2>Feb</h2>
			</time>

			<div class="row-item row-item--shrink align--right">
				<p class="text--caption">Canceled</p>
			</div>

		</div>

		<div class="chunk eventInfo-primary">
			<p class="wrap--singleLine--truncate chunk text--secondary">Saturday at 2:00 pm</p>

			<h3 class="text--strikethrough">Backpacking For Beginners</h3>

			<ul class="inlineblockList matchLineHeight">
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li><commit_msg>canceled -> cancelled to match API<commit_after>/*doc
---
title: Cards
name: uiCard
category: UI Components
---
Card-like boxes.

## Standard, Group, and Event cards
(This example uses `gridList`, but cards may placed anywhere)

```html_example
<section class="stripe--collection">
	<div class="bounds">
		<ul class="gridList gridList--has1 atMedium_gridList--has3">

			<!-- Base card styles -->
			<li>
				<div class="card">
					<h4>Look at this card</h4>
					<p>Just <em>look at it</em></p>
				</div>
			</li>

			<!-- Group card -->
			<li>
				<div class="card inverted" style="background-image: url(http://photos4.meetupstatic.com/photos/event/7/6/f/8/600_434010456.jpeg);">
					<h4>I'm a group card</h4>
				</div>
			</li>

			<!-- Event card -->
			<li>
				<div class="card card--event">
					<h4>I'm an event card</h4>
				</div>
			</li>
		</ul>
	</div>
</section>
```

### Event card detail
An example of a full event card recipie using
`.card` with other existing Sassquatch2 components.


_(The inline style on the card element is for documentation purposes only)_

```html_example
<section class="stripe--collection">
	<a href="#" class="chunk card card--event" style="margin: 16px; max-width: 250px;">

		<div class="row row--spaceBetween row--wrap">

			<time datetime="20150221" class="row-item row-item--shrink">
				<h2 class="text--graphic display--inlineBlock">21</h2>
				<h2>Feb</h2>
			</time>

			<div class="row-item row-item--shrink align--right">
				<p class="text--caption">No spots left</p>
			</div>

		</div>

		<div class="chunk eventInfo-primary">
			<p class="wrap--singleLine--truncate chunk text--secondary">Saturday at 2:00 pm</p>

			<h3>Backpacking For Beginners</h3>

			<ul class="inlineblockList matchLineHeight">
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="text--caption">+8</li>
			</ul>
		</div>
	</a>
	<a href="#" class="chunk card card--event card--event--featured" style="margin: 16px; max-width: 250px;">

		<div class="row row--spaceBetween row--wrap">

			<time datetime="20150221" class="row-item row-item--shrink">
				<h2 class="text--graphic display--inlineBlock">21</h2>
				<h2>Feb</h2>
			</time>

			<div class="row-item row-item--shrink align--right">
				<p class="text--caption">Featured</p>
			</div>

		</div>

		<div class="chunk eventInfo-primary">
			<p class="wrap--singleLine--truncate chunk text--secondary">Saturday at 2:00 pm</p>

			<h3>Backpacking For Beginners</h3>

			<ul class="inlineblockList matchLineHeight">
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="text--caption">+8</li>
			</ul>
		</div>
	</a>
	<a href="#" class="chunk card card--event card--event--cancelled" style="margin: 16px; max-width: 250px;">

		<div class="row row--spaceBetween row--wrap">

			<time datetime="20150221" class="row-item row-item--shrink">
				<h2 class="text--graphic display--inlineBlock">21</h2>
				<h2>Feb</h2>
			</time>

			<div class="row-item row-item--shrink align--right">
				<p class="text--caption">Cancelled</p>
			</div>

		</div>

		<div class="chunk eventInfo-primary">
			<p class="wrap--singleLine--truncate chunk text--secondary">Saturday at 2:00 pm</p>

			<h3 class="text--strikethrough">Backpacking For Beginners</h3>

			<ul class="inlineblockList matchLineHeight">
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
				<li class="avatar avatar--person avatar--small" style="background-image: url(http://photos1.meetupstatic.com/photos/member/e/0/7/e/member_241857470.jpeg);">Member name</li>
{'fraction_non_alphanumeric': 0.18689026848343143, 'fraction_numerical': 0.048859146980569215, 'mean_word_length': 4.110836423568191, 'pattern_counts': {'":': 0, '<': 269, '<?xml version=': 0, '>': 270, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3491148', 'n_tokens_mistral': 5264, 'n_tokens_neox': 4286, 'n_words': 769}