Property | Value | Description |
name | button | Should be button for now |
version | 2 | Should be 2 for now |
Property | Example value |
|
margin | 0 |
|
size | 1 | Value between 1-3 |
border-width | 1px | A pixel value |
border-radius | 7 | Value between 1-9 |
background | rgba(255, 0, 0, 1) | RGBA string |
background-hover | rgba(255, 0, 0, 1) | RGBA string |
color | rgba(255, 0, 0, 1) | RGBA string |
color-hover | rgba(255, 0, 0, 1) | RGBA string |
border-color | rgba(255, 0, 0, 1) | RGBA string |
border-color-hover | rgba(255, 0, 0, 1) | RGBA string |
align | right | left/center/right |
disable | margin | Comma separated string |
Usage
Given that your block is called example, you can add this:
HTML
<div class="example-button-wrapper">
<sf-link id=":1" description="Button" class="example-button" force-link="true" purpose="button"></sf-link>
</div>
CSS
.example__button {
@include button();
display: inline-block;
position: absolute;
bottom: 35px;
&:hover {
color: $button-color-hover;
background: $button-background-hover;
border-color: $button-border-color-hover;
}
}
.example__button-wrapper {
display: flex;
justify-content: $button-justify-content;
}
Properties
<properties>
<button
name="button"
size="1"
border-radius="3"
color="rgba(0, 0, 0, 1)"
align="left"
/>
</properties>
Usage without link
<span class="example__button-wrapper">
<span class="example__button">
Read more
</span>
</span>