Design System

Alert Blockquote Breadcrumbs Button Colors Comment Comments Filter Form Icons Input Modal Nav Navbar Pagination Progress Bar Search Form Section Sharing Sidebar Single Content Single Footer Single Header Single Meta Site Footer Site Header Sub Section Table Teaser Typography

Button

Variables

classes: String. Classes to be applied to this button.
data: Object. An object of properties to values to be added as data attributes.
disabled: Boolean. A boolean to indicate if the element should be visually and functionally disabled.
label: String. Label for the button, can contain HTML.
type: String. The type for this button (button, reset or submit).
link_classes: String. Classes to be applied to <a> that wraps the button.
href: String. Address this button should lead to.
download: Boolean. Defines if the button is for the download.
target: String. _blank or _self.

Variations

Primary button. Size Lg.


                   {% include "button/button.twig" with { classes: "btn-black--lg", label: "Button", type: "button",  } %}

Primary button. Size Md.


                   {% include "button/button.twig" with { classes: "btn-black--md", label: "Button", type: "button",  } %}

Primary button. Size Sm.


                   {% include "button/button.twig" with { classes: "btn-black--sm", label: "Button", type: "button",  } %}

Primary button. Size XS.


                   {% include "button/button.twig" with { classes: "btn-black--xs", label: "Button", type: "button",  } %}

Secondary button. Size Lg.


                   {% include "button/button.twig" with { classes: "btn-white--lg", label: "Button", type: "button",  } %}

Secondary button. Size Md.


                   {% include "button/button.twig" with { classes: "btn-white--md", label: "Button", type: "button",  } %}

Secondary button. Size Sm.


                   {% include "button/button.twig" with { classes: "btn-white--sm", label: "Button", type: "button",  } %}

Secondary button. Size XS.


                   {% include "button/button.twig" with { classes: "btn-white--xs", label: "Button", type: "button",  } %}

Transparent button. Size Lg.


                   {% include "button/button.twig" with { classes: "btn-transparent--lg", label: "Button", type: "button",  } %}

Transparent button. Size Md.


                   {% include "button/button.twig" with { classes: "btn-transparent--md", label: "Button", type: "button",  } %}

Transparent button. Size Md Narrow. Special case for footer newslwtter.


                   {% include "button/button.twig" with { classes: "btn-transparent--md-narrow", label: "Button", type: "button",  } %}

Transparent button. Size Sm.


                   {% include "button/button.twig" with { classes: "btn-transparent--sm", label: "Button", type: "button",  } %}

Transparent button. Size XS.


                   {% include "button/button.twig" with { classes: "btn-transparent--xs", label: "Button", type: "button",  } %}

Variables

active: Boolean. If this link is active.
classes: String. Classes to be applied to this link.
data: Object. An object of properties to values to be added as data attributes.
disabled: Boolean. A boolean to indicate if the element should be visually and functionally disabled.
label: String. Label for the link, can contain HTML.
href: String. Address this link should lead to.
type: String. The type for this link (button, reset or submit).
target: String. _blank or _self.
link_classes: String. Classes to be applied to <a> that wraps the link.
icon_before: String. Path to the icon to show before the label.
icon_after: String. Path to the icon to show after the label
email: Boolean. if this link is e-mail.

Variations

Link standard


                   {% include "button/link.twig" with { label: "Link standard", href: "https://vladimir.fi",  } %}

Link default


                   {% include "button/link.twig" with { classes: "link__default", label: "Link default", href: "https://vladimir.fi",  } %}

Link with icon


                   {% include "button/link.twig" with { classes: "link__icon-top-right", label: "Link with icon", href: "https://vladimir.fi", target: "_blank", icon_after_label: "assets/images/arrow-up-right.svg"  } %}

Link inside text

Journal of Intercultural Communication Research


                   {% include "button/link.twig" with { classes: "link__inside-text", label: "Journal of Intercultural Communication Research", href: "https://vladimir.fi",  } %}


                   {% include "button/link.twig" with { classes: "link__icon-right", label: "Read more", href: "https://vladimir.fi", icon_after_label: "assets/images/arrow-right.svg"  } %}

Back


                   {% include "button/link.twig" with { classes: "link__icon-left", label: "Back", href: "https://vladimir.fi", icon_before_label: "assets/images/arrow-left.svg",  } %}

Navbar links


                   {% include "button/link.twig" with { classes: "link__navbar", label: "Log in", href: "https://vladimir.fi",  } %}