Modifier Classes

Alignment

Applies !important declaration

Text alignment

The following classes change the text-align of an element.

Class Description
.align--left sets text-align to left
.align--right sets text-align to right
.align--center sets text-align to center

Vertical alignment

The following classes adjust vertical centering of element contents.

For elements displaying as inline-block or table-cell, the vertical-align property is used.

For flex children, these classes set the align-self property to a value that best matches the vertical-align value.

Class Description
.valign--baseline vertically centers element to baseline
.valign--bottom vertically centers element to bottom
.valign--middle vertically centers element to middle
.valign--top vertically centers element to top

Aligning Children

The following classes adjust the alignment of child elements using flexbox. The selected element will be set to display: flex in a column direction.

Class Description
.valignChildren--bottom vertically centers children to the bottom of the parent element
.valignChildren--center vertically centers children within the parent element
Aspect ratio helper

Maintains a given aspect ratio for flexible media. Apply to elements with background images.

Class Description
.keepAspect maintains 1:1 aspect ratio when resized
.keepAspect--16-9 maintains 16:9 aspect ratio when resized
.keepAspect--2-1 maintains 2:1 aspect ratio when resized
.keepAspect--2-3 maintains 2:3 aspect ratio when resized
.keepAspect--4-3 maintains 4:3 aspect ratio when resized
Background

Background modifiers.

Image Fill

Sets background properties that center background image, set size to 'cover', and overflow hidden.

Extends %imgFill.

EXAMPLE TK

Borders

Sets border properties on element

Class Description
.border--top sets a standard top border on the element
.border--right sets a standard right border on the element
.border--bottom sets a standard bottom border on the element
.border--left sets a standard left border on the element
.border--none removes all borders from element
.bordered sets a standard top border AND top padding
.focus--none removes user agent focus style
Anchors & Buttons

Applies button-like pointer styles, text-decoration, and user-select.

<a class="chunk display--block">I'm just an anchor, displayed block</a>
    <a class="buttonPersonality chunk display--block">I behave more like a button (hover over me; try to select this text)</a>
Display

Modifies display property of element

Class Description
.display--none sets display to none
.display--block sets display to block
.display--flex sets display to flex
.display--inline sets display to inline
.display--inlineBlock sets display to inline-block
.display--inlineFlex sets display to inline-flex
.display--grid sets display to grid
Flex Parent

Sets display: flex rules for selected element as well as orientation rules for row or column.

Class Description
.flexParent--row sets display to flex with row orientation for children
.flexParent--column sets display to flex with column orientation for children
Float

Left and right float

Class Description
.float--left floats selected element left
.float--right floats selected element right
Float

Float clearing.

Class Description
.clearfix clears float property of children
Flush

Applies !important declaration

The following classes "flush" an element, removing padding and margin for a given side variant.

Class Description
.flush--all removes padding and margin from all sides of an element
.flush--top removes padding and margin from the top side of an element
.flush--right removes padding and margin from the right side of an element
.flush--bottom removes padding and margin from the bottom side of an element
.flush--left removes padding and margin from the left side of an element
Javascript-conditional modifiers

Conditionally changes the display property of an element based javascript availability.

Assumes a class of hasJS is added to the body tag with javascript on page load

Class Description
hasJS_display--block Sets display property to block if user has JS
hasJS_display--inline Sets display property to inline if user has JS
hasJS_display--inlineBlock Sets display property to inline-block if user has JS
hasJS_display--none Sets display property to none if user has JS
List

Standard divided/spaced list; similar to an iOS table view.

Bottom spacing is provided with chunk.

  • Just a list item

  • Just a list item

  • Just a list item

<ul class="list">
    <li class="list-item">
        <h2 class="chunk">Just a list item</h2>
    </li>
    <li class="list-item">
        <h2 class="chunk">Just a list item</h2>
    </li>
    <li class="list-item">
        <h2 class="chunk">Just a list item</h2>
    </li>
</ul>
List item variants

A class of .list-item is required on list items. The following classes are optional variants:

Class Description
.list-item--active adds a background color to denote selected/active state (at medium & up only)
.list-item--gutters adds left and right padding to list item

Touchable list items with selection

The list-item class can be applied to anchors instead for a touchable list

<div class="chunk">
    <h2>Touchable list items with selection</h2>
    <p>The <code>list-item</code> class can be applied to anchors instead for a touchable list</p>
</div>
<ul class="list">
    <li>
        <a href="#" class="list-item list-item--gutters">
            <div class="chunk">
                <h3 class="text--bold">Member Name</h3>
                <p class="text--caption">Something blah blah</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="list-item list-item--gutters list-item--active">
            <div class="chunk">
                <h3 class="text--bold">Member Name</h3>
                <p class="text--caption">Something blah blah</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="list-item list-item--gutters">
            <div class="chunk">
                <h3 class="text--bold">Member Name</h3>
                <p class="text--caption">Something blah blah</p>
            </div>
        </a>
    </li>
</ul>
Match media size

Match media height

The following classes increasing the height of an element to match one of our specified media sizes.

Class Description
.matchMediaSize--height--xs sets height to $media-xs
.matchMediaSize--height--s sets height to $media-s
.matchMediaSize--height--m sets height to $media-m
.matchMediaSize--height--l sets height to $media-l
Media-conditional modifiers

Media-conditional modifiers allow us to apply a modification at a specific breakpoint.

Uses atMediaUp

Example

This text inherits the default left alignment by default, but at large viewports and up, the text should center

<p class="atLarge_align--center">
        This text inherits the default left alignment by default, but at `large` viewports and up, the text should center
    </p>

Supported modifications

Using this signature: .at[Breakpoint]_[property]--[variant]

Breakpoints Property Variants
medium, large align center, right, left
medium, large display none, block, flex, grid inline, inlineBlock, inlineFlex
medium, large padding top, right, bottom, left, none
medium, large margin center
medium, large border top, none
medium, large visibility a11yHide, a11yShow
medium, large width auto, full
Media Sizing

Classes for applying dimensions to an element.

Class Description
.media--xs Sets width to $media-xs and height to auto
.media--s Sets width to $media-s and height to auto
.media--m Sets width to $media-m and height to auto
.media--l Sets width to $media-l and height to auto
.media--xl Sets width to $media-xl and height to auto
.media--xxl Sets width to $media-xxl and height to auto
Margin/Padding

Applies the standard unit of space as margin or padding to an element.

Margin

Class Description
.margin--top Adds top $space margin to element
.margin--right Adds right $space margin to element
.margin--bottom Adds bottom $space margin to element
.margin--left Adds left $space margin to element
.margin--halfTop Adds top $space-half margin to element
.margin--halfRight Adds right $space-half margin to element
.margin--halfBottom Adds bottom $space-half margin to element
.margin--halfLeft Adds left $space-half margin to element
.margin--all Adds margin to all sides of element
.margin--none Sets margin to 0
.margin--center Sets left and right margin to auto

Padding

Class Description
.padding--top Adds top $space padding to element
.padding--right Adds right $space padding to element
.padding--bottom Adds bottom $space padding to element
.padding--left Adds left $space padding to element
.padding--halfTop Adds top $pace-half padding to element
.padding--halfRight Adds right $space-half padding to element
.padding--halfBottom Adds bottom $space-half padding to element
.padding--halfLeft Adds left $space-half padding to element
.padding--all Adds padding to all sides of element
.padding--none Sets padding to 0
Sticky

Sets the position property of element to sticky, and uses modifier classes for picking a which side of the viewport to stick to

Class Description
.sticky sets position to sticky
.sticky--top sets top to 0, causing element to "stick" to the top of the viewport
.sticky--bottom sets bottom to 0, causing element to "stick" to the bottom of the viewport
Text Modifiers

Modifiers for text.

Hiding Text

To hide just the text node of an element, use the text--hide modifier.

This is useful for links that only contain an SVG icon (use descriptive text for screen readers).

(this class will not work on inline elements)

<a class="display--block text--hide" href="#">
    You can see the kitten, but you can't see this text.
    <img src="https://placekitten.com/g/32/32&quot; />
</a>
Class Description
.text--hide Visually hides text; removes text from document flow
Text decoration/transform

Basic text decoration and transform

Class Description
.text--strikethrough strikethrough/strikeout/line-through
.text--uppercase uppercase text (limited to English)
No Hyphens

Don't allow hyphens on line breaks

Class Description
.text--noHyphens Don't allow hyphens on line breaks
Nice Hyphenation

Enables breaking all words and auto-hyphenation.

Class Description
.text--wrapNice Auto hyphenation and nice wrapping for running text
Type wrap/whitespace

Sets type wrapping, witespace, and overflow properties on element

Class Description
.wrap--singleLine forces text to a single line (nowrap)
.wrap--singleLine--truncate forces text to a single line (nowrap) and truncates with …
.matchLineHeight adds a small amount of top and bottom margin to a non-text element to match line height of nearby text
Thumbnails

Sets background cover and position for photo thumbnails.

<div class="thumb media--l" style="background-image: url(http://photos4.meetupstatic.com/photos/member/d/0/2/c/member_156833292.jpeg);"></div&gt;
Visibility

Modifies visibility property of an element or in the case of a11y classes, visually hides an element that will not be ignored by screen readers.

Class Description
.visibility--a11yHide takes element out of document flow and hides it (screen readers will NOT ignore the element)
.visibility--a11yShow reveals a a11y hidden element for sighted users
Width

Sets element width in percentage.

Includes !important directive in order to override input attribute selectors.

span--[width%]

100% width

80% width

75% width

60% width

50% width

30% width

25% width

<p class="span--100" style="background: pink;">100% width</p>
<p class="span--80" style="background: pink;">80% width</p>
<p class="span--75" style="background: pink;">75% width</p>
<p class="span--60" style="background: pink;">60% width</p>
<p class="span--50" style="background: pink;">50% width</p>
<p class="span--30" style="background: pink;">30% width</p>
<p class="span--25" style="background: pink;">25% width</p>
Animation

Applies keyframes animation to element

Class Description
.animate--bounceInSubtle Applies bounce-in keyframes animation (plays once)
.animate--spin Applies 360deg rotation keyframes (infinite)

Layout

Row

DEPRECATED

Please use the Flex component in meetup-web-components instead.


Arranges content in rows using display: flex.

The .row class is applied to a wrapping element.

Direct children of .row are flex children, and require a class of .row-item with an optional .row-item--shrink for a flex-shrink item.

The flex children in flex row do not have a flex-basis set; a basis is not required for most common layout tasks.

Includes table-cell fallback for IE8.

Examples:

Item 1
Item 2
Item 3
Item 4
<div class="row">
    <div class="_DOC-SHADE row-item">Item 1</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 2</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div>
    <div class="_DOC-SHADE row-item">Item 4</div>
</div>
Item 1
Item 2
Item 3
<div class="row">
    <div class="_DOC-SHADE row-item row-item--shrink">Item 1</div>
    <div class="_DOC-SHADE row-item">Item 2</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="row row--flexEnd">
    <div class="_DOC-SHADE row-item row-item--shrink">Item 1</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 2</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div>
</div>
Item 1
Item 2
Item 3
Item 4
<div class="row row--spaceBetween row--reverse">
    <div class="_DOC-SHADE row-item row-item--shrink">Item 1</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 2</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div>
    <div class="_DOC-SHADE row-item row-item--shrink">Item 4</div>
</div>
Row variants

DEPRECATED

Please use the Flex component in meetup-web-components instead.


A class of .row is required on the flex row parent. The following classes are optional variants:

Class Description
.row--noGutters removes padding from all .row-item children
.row--wrap allows row wrapping (useful for collapsing rows in smaller viewports)
.row--reverse reverses row order

Content justification variants are also available (see also: css tricks flexbox demo)

Class Description
.row--flexEnd justifies content to flex-end
.row--center justifies content to center
.row--spaceBetween justifies content to spaceBetween
.row--spaceAround justifies content to spaceAround
Row Item variants

DEPRECATED

Please use the Flex component in meetup-web-components instead.


A class of .row-item is required on row items. The following classes are optional variants:

Class Description
.row-item--shrink Item shrinks to fit content

Text Styles

Body/primary

This is default body text, inheritied from type styles applied to <body>

<p>This is default body text, inheritied from type styles applied to &lt;body&gt;</p>
Inverted

Apply the inverted class to a container with a dark background color or photo to flip all text elements to inveted colors.

This is default body text, inheritied from type styles applied to <body>

<div style="background: #353E48;" class="inverted">
    <p>This is default body text, inheritied from type styles applied to &lt;body&gt;</p>
</div>
Hint

This is hint text

<p class="text--hint">This is hint text</p>
Secondary

Secondary text is secondary

<p class="text--secondary">Secondary text is secondary</p>
Tertiary

Tertiary text is tertiary

<p class="text--tertiary">Tertiary text is tertiary</p>
Bold

Bold text is bold

<p class="text--bold">Bold text is bold</p>
Normal

Normal text class is a normal font-weight.

This heading is usually bold.

<h2 class="text--normal">Normal text class is a normal font-weight.</h2>
<h2 class="text--normal">This heading is usually bold.</h2>
Small

Small text class is small

Default styling of "small" tag
<p class="text--small">Small text class is small</p>
<small>Default styling of "small" tag</small>
Tiny

Tiny text class is VERY small and should be used sparingly and probably never in conjunction with text--hint

<p class="text--tiny">Tiny text class is VERY small and should be used sparingly and probably never in conjunction with `text--hint`</p>
Big

Big text class is big

Default styling of "big" tag
<p class="text--big">Big text class is big</p>
<big>Default styling of "big" tag</big>
Monospaced

The code and pre elements use a monospaced font by default. To apply monospaced type rules to any other element, use text--mono.

Is this code? What is this?

This is code
We can safely assume a pre tag on Meetup is also code
<p class="text--mono">Is this code? What is this?</p>
<code>This is code</code>
<pre>We can safely assume a pre tag on Meetup is also code</pre>
Caption

I'm captioning all the things

<p class="text--caption">I'm captioning all the things</p>
Error

I'm erroring all the things

Attention!

<p class="text--error">I'm erroring all the things</p>
<p class="text--attention">Attention!</p>
Colored text

Applies standard text colors. The variant is the color name: text--[color]. All supported variants are listed below.

These classes set both the color and fill properties in order to also set the color of icons inline with text.

This style is set as !important

  • Normal heavy text
  • Colorful heavy text
  • Colorful heavy text
  • Colorful heavy text
  • Colorful heavy text
  • Colorful heavy text
  • Colorful heavy text
  • Colorful heavy text
<section class="stripe stripe--inverted inverted">
    <div class="bounds">
        <ul class="inlineblockList inlineblockList--bulleted chunk text--heavy">
            <li>Normal heavy text</li>
            <li class="text--red">Colorful heavy text</li>
            <li class="text--dark-red">Colorful heavy text</li>
            <li class="text--pink">Colorful heavy text</li>
            <li class="text--teal">Colorful heavy text</li>
            <li class="text--blue">Colorful heavy text</li>
            <li class="text--yellow">Colorful heavy text</li>
            <li class="text--orange">Colorful heavy text</li>
        </ul>
    </div>
</section>
Middot text

I have a right middot

I have a left middot

<p class="text--middotRight">I have a right middot</p>
<p class="text--middotLeft">I have a left middot</p>
Running text

By default, paragraphs and headings are not styled with any bottom spacing. Links are not blue by default, as the most common case on Meetup will be block-level anchors with large touch targets.

However, there will be instaces where you want the blue links and properly spaced paragraphs of running text (ie. event descriptions).

The robot is partially dressed in waterproof surgical garb.

"Bruce Springsteen" is a terrible name for a cat.


The robot is partially dressed in waterproof surgical garb.

"Bruce Springsteen" is a terrible name for a cat.

<p>The robot is partially dressed in waterproof surgical garb.</p>
<p>"Bruce Springsteen" is a terrible name for a <a href="#">cat</a>.</p>

<hr style="margin: 8px;" /> <!-- lol, hr -->

<div class="runningText">
    <p>The robot is partially dressed in waterproof surgical garb.</p>
    <p>"Bruce Springsteen" is a terrible name for a <a href="#">cat</a>.</p>
</div>
Link color

You can always force an anchor to apply a linky blue color by applying the .link class.

Let's force this link to be red-underlined.

<p>Let's force this <a class="link" href="#">link</a> to be red-underlined.</p>
Bulleted lists

<ul> and <ol> element list styles are reset by default.

  • Eggs
  • More Eggs
<ul>
    <li>Eggs</li>
    <li>More Eggs</li>
</ul>

List style bullets are applied when list elements are inside a .runningText container.

Shopping list

  • Eggs
  • More Eggs
<div class="bounds">
    <h3 class="text--big">Shopping list</h3>
    <div class="runningText">
        <ul>
            <li>Eggs</li>
            <li>More Eggs</li>
        </ul>
    </div>
</div>

You may also use the .bullets class to apply numbers/bullets to a list.

Shopping list

  • Eggs
  • More Eggs
<div class="bounds">
    <h3 class="text--big">Shopping list</h3>
    <ul class="bullets">
        <li>Eggs</li>
        <li>More Eggs</li>
    </ul>
</div>
Debug text

Sometimes you just need to dump some text into a document to debug.

By default, the debug element is hidden. Apply the enableDebug class to a parent element to display debug elements.

Setting the enableDebug class on body for dev only is recommended.

Invisible debug

Visible debug [ ChapterProto => chapterId=530569 parentChapterId=0 transitionalVenueId=0 relocatedZip= name=Foreign Androids Feel Frustrated

<p class="debug">Invisible debug</p>

<div class="enableDebug">
<p class="debug">
    Visible debug [ ChapterProto =>
    chapterId=530569
    parentChapterId=0
    transitionalVenueId=0
    relocatedZip=
    name=Foreign Androids Feel Frustrated
</p>
</div>

Forms

Basic Inputs
The chunk and row classs used below are for documentation purposes only and are not provided by swarm-sassutils. For layout components, see meetup-web-components

Text inputs

<div class="chunk">
    <label for="test-textinput" class="required">I'm a label</label>
    <input id="test-textinput" type="text" value="Text input with value" />
</div>

<div class="chunk">
    <label for="test-textinput2">Just another label</label>
    <input id="test-textinput2" type="text" placeholder="Text input with placeholder" />
</div>

<div class="chunk">
    <label for="test-textarea">Here's an area for your text</label>
    <textarea id="test-textarea"></textarea>
</div>

<div class="chunk">
    <label for="test-select">What is this?</label>
    <select id="text-select">
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
    </select>
</div>

<div class="row">
    <div class="row-item chunk">
        <label for="split1">Favorite number</label>
        <input id="split0" type="number" />
    </div>
    <div class="row-item chunk">
        <label for="split1">Unicorn name</label>
        <input id="split1" type="text" placeholder="ie. Fluffy, Resplendent" />
    </div>
    <div class="row-item chunk">
        <label class="required" for="split2">Unicorn color</label>
        <select id="split2">
            <option value="clear">Transparent</option>
            <option value="green">Toasted clove saffron</option>
            <option value="brown">Midnight brown</option>
            <option value="black">Seabreeze black</option>
        </select>
    </div>
</div>
Checkboxes

A label variant class of label--minor is used for side-by-side inputs and labels.

For radios and checkboxes, we put the input element inside the label element.

A class of checkbox is required on checkbox input elements.

<label for="check1" class="label--minor chunk">
    <input id="check1" class="checkbox" value="green" type="checkbox" />
    Green
</label>
<label for="check2" class="label--minor chunk">
    <input id="check2" class="checkbox" value="blue" type="checkbox" />
    Blue
</label>
<label for="check3" class="label--minor chunk">
    <input id="check3" class="checkbox" value="blue" type="checkbox" checked />
    Already checked
</label>

Headings

Headings

Heading defaults.

Heading tags

All heading tags are reset to use text--heavy styles by default.

Apply a text class to apply additional heading styles; for example, text--display1.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Display text

Display text is useful for styling headings.

Use the semantically correct heading level tag, then apply a display text class to visually style the tag as a heading.

Display text is for headings

<h2 class="text--display1">Display text is for headings</h2>
Title text

Title text is used to title entire views or for labeling sections of a view.

Page title is for labeling views

Section title is for labeling sections of views

<h2 class="text--pageTitle">Page title is for labeling views</h2>
    <h2 class="text--sectionTitle">Section title is for labeling sections of views</h2>
Label header

Label for subsection

Secondary label for subsection

<h3 class="text--label">Label for subsection</h3>
    <h3 class="text--labelSecondary">Secondary label for subsection</h3>

Tables

Default table styles
State Number of escalators State bird
New York 7,674 Cardinal
Wyoming 2 Cardinal
Oregon 400 Cardinal
Florida n/a Cardinal
<table>
    <thead>
        <tr>
            <th>State</th>
            <th>Number of escalators</th>
            <th>State bird</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>New York</th>
            <td>7,674</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Wyoming</th>
            <td>2</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Oregon</th>
            <td>400</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Florida</th>
            <td>n/a</td>
            <td>Cardinal</td>
        </tr>
    </tbody>
</table>
Bordered table

Apply the borderedTable class to apply borders to table cells.

State Number of escalators State bird
New York 7,674 Cardinal
Wyoming 2 Cardinal
Oregon 400 Cardinal
Florida n/a Cardinal
<table class="borderedTable">
    <thead>
        <tr>
            <th>State</th>
            <th>Number of escalators</th>
            <th>State bird</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>New York</th>
            <td>7,674</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Wyoming</th>
            <td>2</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Oregon</th>
            <td>400</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Florida</th>
            <td>n/a</td>
            <td>Cardinal</td>
        </tr>
    </tbody>
</table>
Reset table
State Number of escalators State bird
New York 7,674 Cardinal
Wyoming 2 Cardinal
Oregon 400 Cardinal
Florida n/a Cardinal
<table class="resetTable">
    <thead>
        <tr>
            <th>State</th>
            <th>Number of escalators</th>
            <th>State bird</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>New York</th>
            <td>7,674</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Wyoming</th>
            <td>2</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Oregon</th>
            <td>400</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Florida</th>
            <td>n/a</td>
            <td>Cardinal</td>
        </tr>
    </tbody>
</table>
Striped table

Apply the stripedTable class to add a background stripe to every other row of the table.

State Number of escalators State bird
New York 7,674 Cardinal
Wyoming 2 Cardinal
Oregon 400 Cardinal
Florida n/a Cardinal
<table class="stripedTable">
    <thead>
        <tr>
            <th>State</th>
            <th>Number of escalators</th>
            <th>State bird</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>New York</th>
            <td>7,674</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Wyoming</th>
            <td>2</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Oregon</th>
            <td>400</td>
            <td>Cardinal</td>
        </tr>
        <tr>
            <th>Florida</th>
            <td>n/a</td>
            <td>Cardinal</td>
        </tr>
    </tbody>
</table>