dgsunesen

<div class="sg-component mobile-one-whole omega">
  <div class="sg-component__header mobile-one-whole omega">
    <h2 class="title--xxsmall mobile-two-thirds">{{title}}</h2>
    <p class="mobile-one-third mobile-pull-right mobile-text-right">
      <span class="status-dot status-dot status-dot--{{#compare status "==" "Approved"}}green{{else}}{{#compare status "==" "In progress"}}yellow{{else}}blue{{/compare}}{{/compare}}">{{status}}</span>
    </p>
  </div>
  <!-- Markup -->
  <div class="sg-component__markup mobile-one-whole omega">
    {{> sgComponentContent}}

dgsunesen

'use strict';

// Node.js modules
var path  = require('path');

// node_modules
var grunt = require('grunt'),
    glob  = require('globule'),
    yfm   = require('assemble-yaml'),
    _     = require('lodash');

dgsunesen

---
title: Headings
status: In progress
tabs:
  - tab: html
  - tab: css
  - tab: js
  - tab: description
  - tab: links
jsDoc: filename.md

dgsunesen

assemble: {
      options: {
        helpers: [
          '<%= yeoman.app %>/src/templates/styleguide/handlebarshelpers/sgComponent.js'
        ],
        jsDoc: '<%= yeoman.app %>/src/templates/styleguide/documentation',
        sgComponent: {
          cwd: '<%= yeoman.app %>/src/templates/styleguide/layouts',
          src: '<%= yeoman.app %>/src/templates/partials',
        }

dgsunesen

{{{sgComponent "sgcomponent.hbs" "atoms/text/headings.hbs"}}}