bradfrost

/**
 * Center aligned placeholder text
 */

input {
	box-sizing: border-box;
	width: 100%;
	padding: 1em;
	border: 0.15em solid #808080;
	border-radius: 0.5em;

bradfrost

---

layout: component-detail group: components subgroup: blocks-and-cards permalink: /components/blocks-and-cards/card.html

title: Card description: This is a card. status: Complete

bradfrost

// set up the defaults for the
	var baseIframePath = window.location.protocol + "//" + window.location.host + window.location.pathname.replace("index.html", "");
	var patternName = ((config.defaultPattern !== undefined) && (typeof config.defaultPattern === 'string') && (config.defaultPattern.trim().length > 0)) ? config.defaultPattern : 'all';
	var iFramePath = baseIframePath + "styleguide/html/styleguide.html?" + Date.now();
	if ((oGetVars.p !== undefined) || (oGetVars.pattern !== undefined)) {
		patternName = (oGetVars.p !== undefined) ? oGetVars.p : oGetVars.pattern;
	}

	if (patternName !== "all") {
		patternPath = urlHandler.getFileName(patternName);

bradfrost

"navItems" : [
		{
			"label" : "Nav item",
			"currentPage" : true
		},
        {
            "label" : "Nav item",
            "navItemClass" : "has-children",
            "navChild" : {
	            "navChildList" : [

bradfrost

<nav id="nav" class="c-primary-nav" role="navigation">

    <ul class="c-primary-nav__list">

        {{# navItems }}
		<li class="c-primary-nav__item {{ styleModifier }}">

			<a href="{{ url }}" class="c-primary-nav__link {{# currentPage }}is-current {{/ currentPage }}{{# navChild }} c-primary-nav__link--has-children js-nav-dropdown-trigger{{/ navChild }}">

				{{ label }}

bradfrost

---
title: Block Media
state: inreview
---
The media block consists of...

bradfrost

title
Utility Colors

The utility color palette defines colors that are used to convey meaning such as success, error, warning, and information to the user. These colors should be used for things like alert messages, form validation, tooltips, and other kinds of messaging.

bradfrost

{  
  "blockFeature":{  
    "styleModifier":"featured",
    "number":"0",
    "headline":{  
      "short":"Feet of Elevation Gain"
    },
    "progress":{  
      "max":"100",
      "progressValue":"0",

bradfrost

{  
  "blockFeature":{  
    "number":"4,500",
    "headline":{  
      "short":"Feet of Elevation Gain"
    },
    "progress":{  
      "max":"100",
      "progressValue":"100",
      "label":"Progress: 100%"

bradfrost

• Ziggy
• Zigs
• The Zigster
• It's That Zigs
• Ziggy Piggy
• Piggy Ziggy
• Mr Snorts
• Mr Grunts
• Mr Babies
• Mr Jowlies