Johns Hopkins University Component Library

Inline Buttons 

<!-- Topic Row -->
<div class="inline_buttons">

    <a href="#" class="inline_button_link">
        <span class="inline_button_link_inner">
            <span class="inline_button_link_label">Button</span>
            <span class="inline_button_link_icon" aria-hidden="true">

                <svg class="icon icon_arrow_right">
                    <use href="/images/icons.svg#arrow_right" />
                </svg>

            </span>
        </span>
    </a>
    <a href="#" class="inline_button_link">
        <span class="inline_button_link_inner">
            <span class="inline_button_link_label">Button</span>
            <span class="inline_button_link_icon" aria-hidden="true">

                <svg class="icon icon_arrow_right">
                    <use href="/images/icons.svg#arrow_right" />
                </svg>

            </span>
        </span>
    </a>
</div>
<!-- END: Topic Row -->
 
{#
	{% include '@component-topic-row' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				title: 'Item Title',
				image: '1',
				description: 'Item Description',
				links: [
					{
						title: 'Link Title',
						url: '#',
						icon: 'arrow_right'
					}
				]
			}
		]
	} %}
#}

<!-- Topic Row -->
<div class="inline_buttons">
	{% include '@partial-link' with {
		class: 'inline_button',
		title: 'Button',
		url: '#',
		icon: 'arrow_right'
	} %}
	{% include '@partial-link' with {
		class: 'inline_button',
		title: 'Button',
		url: '#',
		icon: 'arrow_right'
	} %}
</div>
<!-- END: Topic Row -->

No notes defined.