%h2 Basic Typography

= render :partial => "shared/placeholder_text"

%hr

%h3.h5 Headings

.h1 Heading 1
.h2 Heading 2
.h3 Heading 3
.h4 Heading 4
.h5 Heading 5
:coderay
  #!haml

  %h1 Heading 1
  %h2 Heading 2
  %h3 Heading 3
  %h4 Heading 4
  %h5 Heading 5

  // All heading styles can also be reproduced using .h{n}
%hr

%h3.h5 Body text

%p Normal Paragraph - Lebowski ipsum I didn't blame anyone for the loss of my legs, some chinaman in Korea took them from me but I went out and achieved anyway. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo. 

:coderay
  #!haml

  %p Lebowski ipsum I didn't…
// end

%h3.h5 Standout

%p.standout Standout Paragraph - Lebowski ipsum I didn't blame anyone for the loss of my legs, some chinaman in Korea took them from me but I went out and achieved anyway. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo.

:coderay
  #!haml

  %p.standout Lebowski ipsum I didn't…
// end

%h3.h5 Body text helper classes

%p.support Support text - Lebowski ipsum I didn't blame anyone for the loss of my legs, some chinaman in Korea took them from me but I went out and achieved anyway. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo. 
%p.secondary Secondary text - Lebowski ipsum I didn't blame anyone for the loss of my legs, some chinaman in Korea took them from me but I went out and achieved anyway. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo. Pellentesque ac lectus quis elit blandit fringilla a ut turpis. 

:coderay
  #!haml

  %p.support Lebowski ipsum I didn't…
  %p.secondary Lebowski ipsum I didn't…
// end

%hr

%h3.h5 Links

%a{:href=>"#my_link"} Text link
%br
%a.is-active{:href=>"#my_link"} Text link hover/active
%br
%a.prominent{:href=>"#my_link"} Prominent text link
%br
%a.prominent.is-active{:href=>"#my_link"} Prominent text link hover/active

:coderay
  #!haml

  %a{:href=>"#my_link"} Text link
  %a.is-active{:href=>"#my_link"} Text link hover/active
  %a.prominent{:href=>"#my_link"} Prominent text link
  %a.prominent.is-active{:href=>"#my_link"} Prominent text link hover/active
// end

%hr

%h3.h5 Shouts

.shout Shout Text
.small.shout Small shout text
.medium.shout Medium shout text
.large.shout Large shout text
:coderay
  #!haml

  .shout Shout Text
  .small.shout Small shout text
  .medium.shout Medium shout text
  .large.shout Large shout text
// end


%hr

%h2 Lists

%h3.h5 Action lists

%ul.action-list
  %li
    %a{:href=>"my_url"} Item 1
  %li
    %a{:href=>"my_url"} item 2
:coderay
  #!haml

  %ul.action-list
    %li
      %a{:href=>"my_url"} Item 1
    %li
      %a{:href=>"my_url"} Item 2
// end