Copy environment

Button

Preview 
<button type="button" class="button  ">
                    <span class="button__text">lorem ipsum</span>
                    </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum"
  }
}

With Icon

Preview 
<button type="button" class="button  ">
                    <span class="button__text">lorem ipsum</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum",
    "icon": "arrow"
  }
}

Anchor Button

Preview 
<a href="https://play.ee/" class="button  ">
                    <span class="button__text">lorem ipsum</span>
                    </a>
 
{
  "language": "en-US",
  "element": "a",
  "data": {
    "text": "lorem ipsum",
    "link": "https://play.ee/"
  }
}

Block

Preview 
<button type="button" class="button button--block ">
                    <span class="button__text">lorem ipsum</span>
                    </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum"
  },
  "modifier": "button--block"
}

Small Read More

Preview 
<button type="button" class="button button--read button--small ">
                    <span class="button__text">Read moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead more</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "Read moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead moreRead more",
    "icon": "arrow"
  },
  "modifier": "button--read button--small"
}

Read More

Preview 
<button type="button" class="button button--read ">
                    <span class="button__text">lorem ipsum</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum",
    "icon": "arrow"
  },
  "modifier": "button--read"
}

Black Read More

Preview 
<button type="button" class="button button--read button--black ">
                    <span class="button__text">lorem ipsum</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum",
    "icon": "arrow"
  },
  "modifier": "button--read button--black"
}

Large Read More

Preview 
<button type="button" class="button button--read button--large ">
                    <span class="button__text">Read more</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "Read more",
    "icon": "arrow"
  },
  "modifier": "button--read button--large"
}

Dropdown

Preview 
<button type="button" class="button button--dropdown ">
                    <span class="button__text">Tutvu VKG keskkonnapoliitikaga</span>
                    </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "Tutvu VKG keskkonnapoliitikaga"
  },
  "modifier": "button--dropdown"
}

Dropdown Expanded

Preview 
<button type="button" class="button button--dropdown is-expanded">
                    <span class="button__text">Tutvu VKG keskkonnapoliitikaga</span>
                    </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "Tutvu VKG keskkonnapoliitikaga"
  },
  "modifier": "button--dropdown",
  "class": "is-expanded"
}

Icon

Preview 
<button type="button" class="button button--icon ">
                    <span class="button__text">lorem ipsum</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#facebook"></use>
</svg>
            </span>
            </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum",
    "icon": "facebook"
  },
  "modifier": "button--icon"
}

Simple

Preview 
<button type="button" class="button button--simple ">
                    <span class="button__text">Siseveeb</span>
                    </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "Siseveeb"
  },
  "modifier": "button--simple"
}

Social Big

Preview 
<button type="button" class="button button--icon button--big ">
                    <span class="button__text">lorem ipsum</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#facebook"></use>
</svg>
            </span>
            </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum",
    "icon": "facebook"
  },
  "modifier": "button--icon button--big"
}

Icon With Link

Preview 
<button type="button" class="button button--icon-w-link ">
                    <div class="button__text-container">
                <span class="button__text">facebook.com/virukeemiagrupp</span>
                </div>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#facebook"></use>
</svg>
            </span>
            </button>

Small Icon With Link

Preview 
<button type="button" class="button button--small button--icon-w-link ">
                    <div class="button__text-container">
                <span class="button__text">Lae alla</span>
                </div>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
            </button>

Icon First

Preview 
<button type="button" class="button button--read button--icon-first ">
                        <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
                <span class="button__text">lorem ipsum</span>
    </button>
 
{
  "language": "en-US",
  "element": "button",
  "data": {
    "text": "lorem ipsum",
    "iconFirst": true,
    "icon": "arrow"
  },
  "modifier": "button--read button--icon-first"
}