123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<!-- side-by-side items -->
<section>
	<h2>side-by-side items</h2>
	<p>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.
	<br/>
	<p><code>@param $alignment {String}</code> — left (default), right, centered, spaced; determines alignment of the set of items</p>
	<p><code>@param $vertical-center {Bool}</code> — true (default) or false</p>
	<p><code>@param $item-gutter {String}</code> — spacing size from the map, xxs-xxl, or none (default)</p>
	<p><code>@param $items-fixed {Bool}</code> — 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</p>
	<p><code>@param $items-fluid {Bool}</code> — true or false (default); if true, items will grow or shrink as they can be given the available space</p>

	<h3>Defaults</h3>
	<div class="example example-sidebyside-defaults">
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
	</div>
	
	<h3>Left-aligned, sm gutter, top aligned</h3>
	<div class="example example-sidebyside-1">
		<div class="item">item</div>
		<div class="item">blah blah blah foo</div>
		<div class="item">item</div>
	</div>

	<h3>Right-aligned, lg gutter</h3>
	<div class="example example-sidebyside-2">
		<div class="item">item</div>
		<div class="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.</div>
		<div class="item">item</div>
	</div>
	
	<h3>Spaced, gutter, fluid items</h3>
	<div class="example example-sidebyside-3">
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
	</div>
	
	<h3>Centered, with Gutter</h3>
	<div class="example example-sidebyside-4">
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
	</div>
	
		<h3>Centered, fluid, no Gutter</h3>
	<div class="example example-sidebyside-5">
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
	</div>
	
	<h3>Centered, one item larger, with Gutter</h3>
	<div class="example example-sidebyside-6">
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
	</div>
	

</section>

<!-- left/right items -->
<section>
	<h2>Split items</h2>
	<p>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.</p>
	<p>Also supports a left or right aligned icon, with a content box next to it.</p>
	
	<p>Item HTML must be a single set of children deep. <code>wrapper --> item item item item</code> Can be used in conjunction with the sidebyside mixin for HTML that has a nested wrapper around the children, for example <code>wrapper --> item + rightwrapper --> item item</code></p>
	
	<p><code>@param $itemNumToSplit {Num}</code> — the item number that begins the left/right split. 0 (default) splits <em>before</em> the first item, causing no split. 1 splits before the second item; 2 the third item, etc.</p>
		<p><code>@param $alignment {String}</code> — left (default), right, centered, spaced; determines alignment of the set of items</p>
	<p><code>@param $vertical-center {Bool}</code> — true (default) or false</p>
	<p><code>@param $item-gutter {String}</code> — spacing size from the map, xxs-xxl, or none (default)</p>

	
	<div class="example example-ltirems-1">
  <!-- without wrapper html	on the children -->
		<div class="item">item</div>
		<div class="item">item</div>
		<div class="item">item</div>
	</div>
	
	<div class="example example-ltirems-2">
  <!-- with wrapper html	on the children -->
		<div class="leftwrapper">
			<div class="icon"></div>
		</div>
		<div class="rightwrapper">
			<div class="item">item</div>
			<div class="item">item</div>
			<div class="item">item</div>
		</div>
	</div>
	
	<div class="example example-icontitle-1">
		<div class="leftwrapper">
			<div class="icon"></div>
		</div>
		<div class="rightwrapper">
			<div class="item username">username</div>
			<div class="text">text</div>
			<div class="text">text</div>
		</div>
	</div>
	
</section>

<!-- cards -->
<section>
	<h2>cards</h2>
	<p>
		N-up cards or boxes (regardless of visual look) with either:
		<ul>
    <li>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...)</li>
    <li>a flexible width, always N-up (e.g. 4-up cards that grow/shrink depending on available space)</li>
			<li>with or without gutters between cards</li>
	</ul>
	</p>

	<p><code>@param $cards-up {Num}</code> — Sets the number of cards in a N-up layout; for example, <code>4</code> 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</p>
	<p><code>@param $card-width {Num px}</code> — - A pixel value to determine the width of the cards; not needed if cards-up is true</p>
	<p><code>@param $card-gutter {String}</code> — A size, from the spacing sizes map, that sets a gutter on the cards.</p>



<h3>N 200px cards as can fit, with gutters</h3>
<div class="example example-cards-nfit">
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
</div>


<h3>no params passed, defaults to auto/content width of cards, cards do not grow or shrink</h3>
<div class="example example-cards-nfit-auto">
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
</div>


<h3>flexible width, always N-up, with gutters</h3>
<p>cards will flex to fill the available space, with as many cards up as the size passed allows</p>
<div class="example example-cards-nup">
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
	<div class="card">card</div>
</div>
</section>
            
          
!
            
              // ------------------------------------------------------------------------- //
// SIDE BY SIDE ------------------------------------------------------------ //
// ------------------------------------------------------------------------- //

.example-sidebyside-defaults {
	@include layout-sidebyside;
}

.example-sidebyside-1 {
	@include layout-sidebyside($alignment: start, $gutter: sm, $vertical-center: false);
}

.example-sidebyside-2 {
	@include layout-sidebyside($alignment: end, $gutter: lg);
	.item:nth-child(2) { color: red; max-width: 250px; }
}

.example-sidebyside-3 {
	@include layout-sidebyside($alignment: spaced, $gutter: sm, $items-fluid: true);
}

.example-sidebyside-4 {
	@include layout-sidebyside($alignment: centered, $gutter: lg);
}

.example-sidebyside-5 {
	@include layout-sidebyside($alignment: centered, $items-fluid: true);
}

.example-sidebyside-6 {
	@include layout-sidebyside($alignment: centered, $gutter: md);
	// override whichever class child element you like
	.item:nth-child(3) {
		flex-basis: 500px; // will have to have its own mediaquery
		// or override the entire flex shorthand for this element
		flex: 1 1 500px;
		// or: width: 500px;
	}
}



// ------------------------------------------------------------------------- //
// LEFT/RIGHT ITEMS -------------------------------------------------------- //
// ------------------------------------------------------------------------- //

// without wrapper html
.example-ltirems-1 {
	@include layout-split(2, false, lg);
}

// with wrapper html using layout-sidebyside
.example-ltirems-2 {
	@include layout-split(2);
	
	.rightwrapper {
		@include layout-sidebyside($gutter: sm);
	}
}

// ------------------------------------------------------------------------- //
// ICON + TITLE ------------------------------------------------------------ //
// ------------------------------------------------------------------------- //

.example-icontitle-1 {
	@include layout-split(0, true, lg);
}

// ------------------------------------------------------------------------- //
// CARDS ------------------------------------------------------------------- //
// ------------------------------------------------------------------------- //

// N 200px cards as can fit
.example-cards-nfit {
	@include layout-cards($card-width: 200px, $gutter: xs);
}

.example-cards-nfit-auto {
	@include layout-cards;
}

// 4-up cards flexible width
.example-cards-nup {
	padding: 0 !important; // rely on cards margin
	@include layout-cards($cards-up: 4, $gutter: sm);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console