Skip to main content

How to declare a variant on component root element?

.componentThe element you want to style.variantThe selector you want to insert

See example​

.btnThe element you want to style.largeThe selector you want to insert
+component('.btn')
  +register
    +variant('.large')

  +default
    display: inline-flex
    font-size: 1em

  +variant('.large')
    font-size: 2em




.btn {
  display: inline-flex;
  font-size: 1em;
}

.btn.large {
  font-size: 2em;
}

More info: +variant, +default, +element, +register, +component