Contents

#headings.style-guide__subsection

  %h3= link_to_style_guide('typography', 'headings')

  %p Sets up the element to be styled the same as an <code>h1-6</code>, using the <code>heading</code> class in combination with a <code>heading--X</code> modifier, where <code>X</code> is the

  %p Can be used on any inline or block-level element to visually present the element as a heading. Frequently applied when, semantically speaking, using a given <code>h1-6</code> tag wouldn't be appropriate.

  %p In the following examples we have a variety of text-wrapping elements:

  %p should style a variety of elements properly.
  .style-guide__example-block
    %h1 Heading 1
    %span.heading.heading--1 Heading 1
    %h2 Heading 2
    %p.heading.heading--2 Heading 2
    %h3 Heading 3
    %strong.heading.heading--3 Heading 3
    %h4 Heading 4
    %h6.heading.heading--4 Heading 4
    %h5 Heading 5
    %h3.heading.heading--5 Heading 5
    %h6 Heading 6
    %h1.heading.heading--6 Heading 6

#heading--fancy.style-guide__subsection

  %h3= link_to_style_guide('components', 'heading__fancy')

  %p Changes heading to use 'fancy' styles, this  H1 is fancy by default

  .style-guide__example-block
    %span.heading.heading--1 Heading 1 -- fancy
    %p.heading.heading--fancy.heading--2 Heading 2 -- fancy
    %strong.heading.heading--fancy.heading--3 Heading 3 -- fancy
    %h6.heading.heading--fancy.heading--4 Heading 4 -- fancy
    %h3.heading.heading--fancy.heading--5 Heading 5 -- fancy
    %h1.heading.heading--fancy.heading--6 Heading 6 -- fancy

#heading--center-at-small.style-guide__subsection

  %h3= link_to_style_guide('components', 'heading__center_at_small')

  %p Center a heading for small devices, left align at medium breakpoint

  .style-guide__example-block
    %span.heading.heading--center-at-small Heading 1

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
workarea-one_theme-1.3.1	app/views/workarea/storefront/style_guides/typography/_headings.html.haml
workarea-one_theme-1.3.0	app/views/workarea/storefront/style_guides/typography/_headings.html.haml