Brad Frost 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

Frontend Guidelines

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

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.

	const DynamicComponent = React.lazy(() =>
	import(`path/to/${reactComponentName}`)
	);

	return (
	//This works, but now how to I crawl in and grab its properties and PropTypes?
	<Suspense fallback={<div>Loading...</div>}>
	<DynamicComponent title="Lazy loaded component" />
	</Suspense>
	)

	<Breadcrumbs>
	<Breadcrumb text="Home" href="/" />
	<Breadcrumb text="Child" href="/child" />
	<Breadcrumb text="Grandchild" href="/child/grandchild" />
	</Breadcrumbs>

	// or

	<Breadcrumbs items={[
	{

	/******************************************************
	* PATTERN LAB NODE
	* EDITION-NODE-GULP
	* 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'),

	// 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);

	<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 }}