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

View gist:1ab38c3ddf108d2bd7f7bd4731ac5db4
// set up the defaults for the
var baseIframePath = window.location.protocol + "//" + + 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?" +;
if ((oGetVars.p !== undefined) || (oGetVars.pattern !== undefined)) {
patternName = (oGetVars.p !== undefined) ? oGetVars.p : oGetVars.pattern;
if (patternName !== "all") {
patternPath = urlHandler.getFileName(patternName);
View primary-nav.json
"navItems" : [
"label" : "Nav item",
"currentPage" : true
"label" : "Nav item",
"navItemClass" : "has-children",
"navChild" : {
"navChildList" : [
View primary-nav.mustache
<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 }}
View gulp-style-guide-export.js
* The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
var gulp = require('gulp'),
path = require('path'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass'),
concat = require('gulp-concat'),

Frontend Guidelines

These guidelines will govern how we write frontend code for The Spruce (and hopefully beyond!)

HTML Guidelines

HTML Principles

  • Author semantic markup - HTML gives structure to content, and browsers, search engines, and assistive devices make use of that structure to benefit users. Headings should be <h1> through <h6> tags, groups of objects should be marked up as <ul> or <ol> tags, and so on.
  • Legibility - Markup should be easily readable by authors, especially considering that markup is often mixed with Freemarker and other non-HTML code. Use proper spacing, naming, and commenting conventions to keep code legible for yourself and your teammates.
  • Bake in accessibility - Incorporate accessibility best practices into markup as you author markup rather than tacking it on as an afterthought.
View gist:2202230dd991d52d3a8375ef508a540d
title: Block Media
state: inreview
The media block consists of...
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.

View dashboard~new-user.json
"short":"Feet of Elevation Gain"
View dashboard.json
"short":"Feet of Elevation Gain"
"label":"Progress: 100%"