CCGA Component Library

Button 

<!-- White -->
<a class="button theme_white  button--with-icon" href="#">
    <span class="button_text">
        Register Today
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- White Without Icon -->
<a class="button theme_white  " href="#">
    <span class="button_text">
        Register Today
    </span>

</a>


<!-- White With Divider -->
<a class="button theme_white button--with-divider button--with-icon" href="#">
    <span class="button_text">
        Download Report
    </span>

    <span class="button_icon">

        <svg class="icon icon_download">
            <use href="/images/icons.svg#download" />
        </svg>

    </span>
</a>


<!-- White Alt -->
<a class="button theme_white_alt button--with-divider button--with-icon" href="#">
    <span class="button_text">
        Add to Calendar
    </span>

    <span class="button_icon">

        <svg class="icon icon_circle_black_plus">
            <use href="/images/icons.svg#circle_black_plus" />
        </svg>

    </span>
</a>


<!-- White On Gray Background -->
<a class="button theme_white  button--with-icon" href="#">
    <span class="button_text">
        Register Today
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- Mint Green -->
<a class="button theme_mint_green  button--with-icon" href="#">
    <span class="button_text">
        Register Today
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- Mint Green Without Icon -->
<a class="button theme_mint_green  " href="#">
    <span class="button_text">
        Register Today
    </span>

</a>


<!-- Real Blue With Divider -->
<a class="button theme_real_blue button--with-divider button--with-icon" href="#">
    <span class="button_text">
        Share This Video
    </span>

    <span class="button_icon">

        <svg class="icon icon_share">
            <use href="/images/icons.svg#share" />
        </svg>

    </span>
</a>


<!-- Mint Green With Divider -->
<a class="button theme_mint_green button--with-divider button--with-icon" href="#">
    <span class="button_text">
        Share This Video
    </span>

    <span class="button_icon">

        <svg class="icon icon_share">
            <use href="/images/icons.svg#share" />
        </svg>

    </span>
</a>


<!-- Mint Green On Dark Background -->
<a class="button theme_mint_green  button--with-icon" href="#">
    <span class="button_text">
        Explore all Newsletter Options
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- With Extra Padding On Gray Background -->
<a class="button theme_mint_green button--extra-padding button--with-icon" href="#">
    <span class="button_text">
        Register for This Event
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- Alabaster -->
<a class="button theme_alabaster  button--with-icon" href="#">
    <span class="button_text">
        Register Today
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- Alabaster Without Icon -->
<a class="button theme_alabaster  " href="#">
    <span class="button_text">
        Register Today
    </span>

</a>


<!-- Alabaster With Divider -->
<a class="button theme_alabaster button--with-divider button--with-icon" href="#">
    <span class="button_text">
        Go to Location
    </span>

    <span class="button_icon">

        <svg class="icon icon_place">
            <use href="/images/icons.svg#place" />
        </svg>

    </span>
</a>


<!-- Alabaster On Dark Background -->
<a class="button theme_alabaster  button--with-icon" href="#">
    <span class="button_text">
        More About the Center
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- Global Blue -->
<a class="button theme_global_blue  button--with-icon" href="#">
    <span class="button_text">
        Navigate
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- Global Blue Without Icon -->
<a class="button theme_global_blue  " href="#">
    <span class="button_text">
        Register Today
    </span>

</a>


<!-- Global Blue With Divider -->
<a class="button theme_global_blue button--with-divider button--with-icon" href="#">
    <span class="button_text">
        Back to Video Listing
    </span>

    <span class="button_icon">

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

    </span>
</a>


<!-- Deep Sea Blue -->
<a class="button theme_deep_sea_blue  button--with-icon" href="#">
    <span class="button_text">
        Register Today
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- Deep Sea Blue Without Icon -->
<a class="button theme_deep_sea_blue  " href="#">
    <span class="button_text">
        Register Today
    </span>

</a>


<!-- Deep Sea Blue With Divider -->
<a class="button theme_deep_sea_blue button--with-divider button--with-icon" href="#">
    <span class="button_text">
        Share This Video
    </span>

    <span class="button_icon">

        <svg class="icon icon_share">
            <use href="/images/icons.svg#share" />
        </svg>

    </span>
</a>


<!-- Deep Sea Blue On Dark Background -->
<a class="button theme_deep_sea_blue  button--with-icon" href="#">
    <span class="button_text">
        Register Today
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


<!-- White Opaque -->
<a class="button theme_white_opaque  button--with-icon" href="#">
    <span class="button_text">
        Register Today
    </span>

    <span class="button_icon">

        <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right" />
        </svg>

    </span>
</a>


{% set icon_modifier = icon ? 'button--with-icon' : '' %}
{% set _theme = theme|default('white') %}

<a class="button theme_{{ _theme }} {{class}} {{icon_modifier}}" href="{{ href }}">
	<span class="button_text">
		{{ text }}
	</span>

	{% if icon %}
		<span class="button_icon">
			{{ icon(icon) }}
		</span>
	{% endif %}
</a>

No notes defined.