## side-by-side items

Takes N items, aligned side by side. Items can take various alignments (left, right, spaced out, or centered) and be vertically centered or set at the top. Items can be auto-width (size of their content) or fluid (change size depending on the space available). Items will always stack below 480px small breakpoint.

`@param $alignment {String}` — left (default), right, centered, spaced; determines alignment of the set of items

`@param $vertical-center {Bool}` — true (default) or false

`@param $item-gutter {String}` — spacing size from the map, xxs-xxl, or none (default)

`@param $items-fixed {Bool}` — true (default) or false; if true, sets the items to be auto-width (the size of their content) and items will not grow or shrink

`@param $items-fluid {Bool}` — true or false (default); if true, items will grow or shrink as they can be given the available space

### Defaults

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

### Left-aligned, sm gutter, top aligned

item
blah blah blah foo
item

### Right-aligned, lg gutter

item
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores minima sequi, rerum officia ullam, quibusdam voluptas at repellat quas nisi, quam voluptatem. Officiis, cumque. Minima voluptatibus facilis nihil iusto maiores.
item

### Spaced, gutter, fluid items

item
item
item

### Centered, with Gutter

item
item
item

### Centered, fluid, no Gutter

item
item
item

### Centered, one item larger, with Gutter

item
item
item

## Split items

In a row, N+ items left aligned and N+ items right-aligned. Uses the sidebyside mixin. Items are always fixed (their auto width) and do not grow or shrink, and stack below 480px.

Also supports a left or right aligned icon, with a content box next to it.

Item HTML must be a single set of children deep. `wrapper --> item item item item` Can be used in conjunction with the sidebyside mixin for HTML that has a nested wrapper around the children, for example `wrapper --> item + rightwrapper --> item item`

`@param $itemNumToSplit {Num}` — the item number that begins the left/right split. 0 (default) splits before the first item, causing no split. 1 splits before the second item; 2 the third item, etc.

`@param $alignment {String}` — left (default), right, centered, spaced; determines alignment of the set of items

`@param $vertical-center {Bool}` — true (default) or false

`@param $item-gutter {String}` — spacing size from the map, xxs-xxl, or none (default)

item
item
item
item
item
item
username
text
text

## cards

N-up cards or boxes (regardless of visual look) with either:

- a fixed width, fitting as many as can fit in the given space (e.g. N 200px cards as can fit in 400px, 600px, 800px, 2000px...)
- a flexible width, always N-up (e.g. 4-up cards that grow/shrink depending on available space)
- with or without gutters between cards

`@param $cards-up {Num}` — Sets the number of cards in a N-up layout; for example, `4` will set 4 cards in a row. defaults to null; if not passed, cards are auto-width of their content and do not grow or shrink

`@param $card-width {Num px}` — - A pixel value to determine the width of the cards; not needed if cards-up is true

`@param $card-gutter {String}` — A size, from the spacing sizes map, that sets a gutter on the cards.

### N 200px cards as can fit, with gutters

card
card
card
card
card
card
card
card
card
card
card
card
card
card

### no params passed, defaults to auto/content width of cards, cards do not grow or shrink

card
card
card
card
card
card
card
card
card
card
card
card
card
card

### flexible width, always N-up, with gutters

cards will flex to fill the available space, with as many cards up as the size passed allows

card
card
card
card
card
card
card
card
card
card
card
card
card
card