There are no notes for this item.

<div class="split split--radio">
    <button type="button" name="button" class="split__button split__button--first split__button--selected js-split-radio">
    <span class="icon__view-list"></span>

    <span class="sr-only">List view</span>
  </button>

    <button type="button" name="button" class="split__button split__button--last js-split-radio">
    <span class="icon__view-tile"></span>

    <span class="sr-only">Tile view</span>
  </button>
</div>
  • Content:
    /*------------------------------------*\
        #SPLIT BUTTON
    \*------------------------------------*/
    
    /* split--radio -> Split Button
       split--multi -> Segmented Button */
    
    .split__button {
      border: 1px solid $border-default;
      background: none;
      outline: none;
      display: inline;
      float: left;
      margin: 0;
      padding: 2px 6px;
      cursor: pointer;
    }
    
    .split__button--first {
      border-top-left-radius: $radius-default;
      border-bottom-left-radius: $radius-default;
      border-right-width: 0;
    }
    
    .split__button--last {
      border-top-right-radius: $radius-default;
      border-bottom-right-radius: $radius-default;
      border-left-width: 0;
    }
    
    .split__button--selected {
      background-color: $button-primary;
      border-color: transparent;
    }
    
    .split--multi .split__button--selected:active {
      background-color: transparent;
      border-color: $border-default;
    }
    
    .split__button--selected.split__button--first {
      border-top-right-radius: $radius-default;
      border-bottom-right-radius: $radius-default;
    }
    
    .split__button--selected.split__button--last {
      border-top-left-radius: $radius-default;
      border-bottom-left-radius: $radius-default;
    }
    
    .split--radio:hover .split__button:not(.split__button--selected) .icon__view-list,
    .split--multi .split__button:hover .icon__view-list,
    .split--multi .split__button--selected:hover .icon__view-list {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split--radio:active .split__button:not(.split__button--selected) .icon__view-list,
    .split--multi .split__button:active .icon__view-list,
    .split--multi .split__button--selected:active .icon__view-list {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split__button--selected .icon__view-list,
    .split--radio .split__button--selected:hover .icon__view-list,
    .split--radio .split__button--selected:active .icon__view-list {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split--radio:hover .split__button:not(.split__button--selected) .icon__view-tile,
    .split--multi .split__button:hover .icon__view-tile,
    .split--multi .split__button--selected:hover .icon__view-tile {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split--radio:active .split__button:not(.split__button--selected) .icon__view-tile,
    .split--multi .split__button:active .icon__view-tile,
    .split--multi .split__button--selected:active .icon__view-tile {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split__button--selected .icon__view-tile,
    .split--radio .split__button--selected:hover .icon__view-tile,
    .split--radio .split__button--selected:active .icon__view-tile {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split--radio:hover .split__button:not(.split__button--selected) .icon__view-column,
    .split--multi .split__button:hover .icon__view-column,
    .split--multi .split__button--selected:hover .icon__view-column {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split--radio:active .split__button:not(.split__button--selected) .icon__view-column,
    .split--multi .split__button:active .icon__view-column,
    .split--multi .split__button--selected:active .icon__view-column {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .split__button--selected .icon__view-column,
    .split--radio .split__button--selected:hover .icon__view-column,
    .split--radio .split__button--selected:active .icon__view-column {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
  • URL: /components/raw/split-button/split-button.scss
  • Filesystem Path: components/02-atoms/02-split-button/split-button.scss
  • Size: 17.5 KB