Citizen University Component Library

Button 

<!-- White -->
<a href="#" class="button theme_white ">
    <span class="button_text">
        Our Story
    </span>

    <span class="button_icon">

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

    </span>
</a>


<!-- Yellow -->
<a href="#" class="button theme_yellow ">
    <span class="button_text">
        Our Story
    </span>

    <span class="button_icon">

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

    </span>
</a>


<!-- Soft Red -->
<a href="#" class="button theme_soft_red ">
    <span class="button_text">
        Our Story
    </span>

    <span class="button_icon">

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

    </span>
</a>


<!-- Gold -->
<a href="#" class="button theme_gold ">
    <span class="button_text">
        Our Story
    </span>

    <span class="button_icon">

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

    </span>
</a>


<!-- Light Blue -->
<a href="#" class="button theme_light_blue ">
    <span class="button_text">
        Our Story
    </span>

    <span class="button_icon">

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

    </span>
</a>


<!-- Dark Blue -->
<a href="#" class="button theme_dark_blue ">
    <span class="button_text">
        Our Story
    </span>

    <span class="button_icon">

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

    </span>
</a>


<!-- Pill -->
<a href="#" class="button theme_yellow is_pill">
    <span class="button_text">
        I want to <strong>build civic power</strong>
    </span>

    <span class="button_icon">

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

    </span>
</a>


<a href="{{ href }}" class="button theme_{{ theme }} {{ modifier }}">
	<span class="button_text">
		{{ text }}
	</span>

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

No notes defined.