CSS Components

When working with Beyond Canvas, you can make use of the following CSS components. Select the respective component from the list to learn more about its available classes and customizable variables.

Actions

Available classes

Class	Description
actions--disabled	Disables the available actions of the element, e.g. of links or buttons.

Buttons

Available classes

Class	Example
button__solid--primary
button__solid--secondary
button__solid--danger
button__transparent--primary
button__transparent--secondary
button__transparent--danger

Customizable variables

Variable	Default
$button-primary-background	rgb(78, 183, 168)
$button-primary-color	rgb(255, 255, 255)
$button-secondary-background	rgb(153, 153, 153)
$button-secondary-color	rgb(255, 255, 255)
$button-danger-background	rgb(218, 60, 60)
$button-danger-color	rgb(255, 255, 255)
$button-border-radius	3px
$button-box-shadow	true

For further information on the customization of variables, see the Style Customization guide

Cards

Available classes

Class	Example
card
card--padding
card__separator
card__headline

Customizable variables

Variable	Default
$card-border-radius	3px
$card-box-shadow	0 2px 7px rgba(0, 0, 0, 0.2)
$card-separator-color	rgb(222, 222, 222)
$card-title-color	rgb(247, 133, 96)

For further information on the customization of variables, see the Style Customization guide

Links

Available classes

Class	Example
link--primary
link--secondary
link--danger

Customizable variables

Variable	Default
$link-primary-color	rgb(61, 149, 137)
$link-secondary-color	rgb(128, 128, 128)
$link-danger-color	rgb(191, 36, 36)

For further information on the customization of variables, see the Style Customization guide

Margins

Available classes

Class	Description
margin--clear	Sets all margins to 0
margin--top	Sets a top margin of 30px
margin--bottom	Sets a bottom margin of 30px
margin--left	Sets a left margin of 30px
margin--right	Sets a right margin of 30px

Markdown

Available classes

Class	Description
markdown	Applies markdown styles (similar to the GitHub ones) to the wrapped content

Scrollbox

Available classes

Class	Description
scrollbox	Generates a scrollable box for wrapped content that exceeds a height of 65vh. In order to visually support the scroll option and direction, a shadow is displayed at the bottom respectively top of the box.

Texts

Available classes

Class	Description
text__align--left	Aligns the wrapped text left
text__align--center	Centers the wrapped text
text__align--right	Aligns the wrapped text right

Titles

Available classes

Class	Example
title

Customizable variables

Variable	Default
$title-color	rgb(122, 118, 76)

For further information on the customization of variables, see the Style Customization guide