Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla fermentum nulla, quis tempus lorem aliquam quis. Phasellus accumsan maximus enim, eu tempor felis. Duis id eros posuere, placerat purus eu, interdum enim. Nullam dapibus lacinia laoreet. In eros turpis, consequat ac egestas a, condimentum laoreet dui.

Heading 1

Cras faucibus hendrerit elit sed porta. Sed eget consectetur arcu. Aliquam ullamcorper lectus in magna ultricies, vel aliquet nisl rhoncus. Sed elementum diam commodo, consequat velit commodo, porttitor risus. Morbi commodo sapien risus, nec venenatis tellus dignissim non.

Heading 2

Donec pharetra ullamcorper lorem eget cursus. Curabitur ac nulla quam. Vestibulum porta vulputate interdum. Duis vitae purus nec nisi efficitur imperdiet. Cras porta lorem ac eros tempus, sed ullamcorper mi pulvinar. Suspendisse non ullamcorper elit.

Heading 3

Morbi accumsan in lectus et suscipit. Nulla lectus nisl, porta in velit eget, volutpat pellentesque metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Heading 4

Suspendisse sodales placerat purus, in tristique turpis lacinia vel. Cras eget ipsum et velit aliquam blandit quis et augue. Morbi rhoncus non neque eget sollicitudin. Sed dapibus elit vitae metus porttitor, pulvinar dictum turpis tristique. Duis vel pretium purus, eu elementum leo. Cras in tortor at erat elementum tincidunt et in dolor.

Heading 5

In hac habitasse platea dictumst. Phasellus vulputate mollis volutpat. Duis laoreet hendrerit nisl, vel placerat sapien. Etiam sem augue, sollicitudin sed vulputate a, faucibus a mi. Aenean ut mauris ligula.

Heading 6

Quisque tincidunt maximus nunc, ut dapibus tellus laoreet vitae. Mauris egestas felis at volutpat aliquam. Nulla facilisi. Fusce molestie ligula ac arcu sodales elementum. Suspendisse potenti. Mauris nec eros dui. Pellentesque a accumsan orci. Sed cursus mollis suscipit. Pellentesque facilisis at velit vel interdum. Sed tortor tellus, venenatis ac egestas eget, lacinia ac massa. Nam at felis tempus, interdum nibh eget, porta purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet tincidunt diam vel condimentum. Maecenas sagittis tortor augue, nec cursus erat efficitur sit amet. Proin luctus velit et nibh condimentum tempus.

Unordered List 2
Unordered List 2
- Sub list 1
- Sub list 2
- Sub list 3
Unordered List 3

Pellentesque mollis finibus nibh et malesuada. In nec venenatis purus, a efficitur nunc. Quisque nec eros feugiat, tristique ex at, vestibulum elit. Maecenas ultrices diam nibh, sed consequat turpis imperdiet sed. Sed id arcu molestie, ornare massa id, feugiat dui.

Ordered list 1
Ordered list 2
1. Sub ordered 1
2. Sub ordered 2
3. Sub ordered 3
Ordered list 3

Cras et lorem felis. Maecenas tempor at lacus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo id lacus pharetra suscipit. Sed ut leo vel dolor scelerisque viverra eu ut diam.

Styleguide Testing Block

The following elements are used to test core html elements from the styleguide.

Buttons

<button class="btn-default">Default Button</button>

<button disabled class="btn-default">Default Button</button>

<button class="btn-default has-icon-left">Default Button</button>

<button disabled class="btn-default has-icon-left">Default Button</button>

<button class="btn-default has-icon-right">Default Button</button>

<button disabled class="btn-default has-icon-right">Default Button</button>

<button class="btn-secondary">Default Button</button>

<button disabled class="btn-secondary">Default Button</button>

<button class="btn-secondary has-icon-left">Default Button</button>

<button disabled class="btn-secondary has-icon-left">Default Button</button>

<button class="btn-secondary has-icon-right">Default Button</button>

<button disabled class="btn-secondary has-icon-right">Default Button</button>

<button class="btn-link">Link button</button>

<button disabled class="btn-link">Link button</button>

<button class="btn-link has-icon-left">Link button</button>

<button disabled class="btn-link has-icon-left">Link button</button>

<button class="btn-link has-icon-right">Link button</button>

<button disabled class="btn-link has-icon-right">Link button</button>

Listing Cards

Tag 1 Tag 2

Listing Card Heading

This is the excerpt content for the listing card. It should be a short description of the content.


$card_settings = array(
    // A unique id for this card is required
    'id' => 'listing-card-1',

    // All other options are optional

    // Inserts html into the image section of the card
    // use the listing-item-image class to apply same styles as the listing page images
    'image' => '',

    // Terms is an array of arrays with name and link keys
    // Use the ghns_get_listing_card_taxonomy_array function to 
    // generate this array from assigned post types terms 
    'terms' => array(
        array(
            'name' => 'Tag 1',
            'link' => 'https://google.com',
        ),
        array(
            'name' => 'Tag 2',
            'link' => 'https://google.com',
        ),
    ),

    // Heading text is the main title of the card
    'heading_text' => 'Listing Card Heading',

    // the heading_text must be defined to use these heading settings
    // If no link provided, will only output a heading tag
    'heading_link' => 'https://google.com',

    // Conrols the tag of the heading
    'heading_level' => 'h2',

    // Outputs html in the listing-item-excerpt container
    'excerpt_content' => 'This is the excerpt content for the listing card. It should be a short description of the content.',

    // Will output the tag button in the listing-item-footer container
    // Both need to be defined to output the button
    'footer_link' => 'https://google.com',
    'footer_link_text' => 'Read More',
);

// Output the card
ghns_listing_card( $card_settings );

Call to Action

Call to Action Heading

This is the content for the call to action. It should be a short description of the content.


$cta_settings = array(
    // All other options are optional

    // Inserts html into the image section of the card
    // use the listing-item-image class to apply same styles as the listing page images
    'image' => '',

    // Heading text is the main title of the card
    'heading_text' => 'Call to Action Heading',

    // Conrols the tag of the heading
    'heading_level' => 'h2',

    // Outputs html in the listing-item-excerpt container
    'content' => 'This is the content for the call to action. It should be a short description of the content.',
    
    // Will output the tag button in the listing-item-footer container
    // Both need to be defined to output the button
    'button_text' => 'Read More',
    'button_link' => 'https://google.com',
    'button_class' => 'btn-primary',
);

Testimonial

This is the content for the testimonial. It should be a short description of the content.

John Doe


$testimonial_settings = array(
    // All other options are optional

    // Inserts html into the image section of the card
    // use the listing-item-image class to apply same styles as the listing page images
    'image' => '',

    // Inserts an embed code from a youtube link
    'video' => 'youtube link',

    // Outputs html in the listing-item-excerpt container
    'content' => 'This is the content for the testimonial. It should be a short description of the content.',
    
    // Will output the tag button in the listing-item-footer container
    // Both need to be defined to output the button
    'author' => 'John Doe',
);

Icon List

List Item 1
List Item 2
List Item 3


$list_items = array(
    array(
        'icon' => 'icon-menu',
        'content' => 'List Item 1',
    ),
    array(
        'icon' => 'icon-menu',
        'content' => 'List Item 2',
    ),
    array(
        'icon' => 'icon-menu',
        'content' => 'List <span style="color:red;">Item 3</span>',
    ),
);

// Output the icon list
ghns_icon_list( $list_items );

Nullam quis tincidunt nisi, at vehicula turpis. Nam nisi purus, molestie et lobortis quis, pulvinar ut magna. Nulla tincidunt tellus orci, vitae laoreet nisi volutpat vel. Proin pulvinar, mauris at hendrerit efficitur, massa metus posuere odio, at cursus mauris enim vel ante. Duis porttitor, velit vel facilisis sagittis, nulla lectus sagittis elit, vitae semper massa elit et nisl.

Fusce sagittis facilisis vulputate. Sed consequat tortor ante, nec congue augue scelerisque sit amet. Proin lacus nulla, dictum nec nulla id, aliquam convallis magna. Maecenas dignissim consequat lacus, vel condimentum elit mattis elementum. Integer laoreet vestibulum sem non porta. Sed ut erat a enim congue faucibus. Mauris nisi dolor, placerat nec egestas ut, ultrices sit amet neque. In hac habitasse platea dictumst. Aliquam pharetra leo vitae facilisis hendrerit.

Style Test