project tests: `style-guide`

Available Variants

prototype

primary-bold

a-font-primary-bold-xxl

a-font-primary-bold-xl

a-font-primary-bold-l

a-font-primary-bold-m

a-font-primary-bold-s

a-font-primary-bold-xs

a-font-primary-bold-xxs

primary-medium

a-font-primary-medium-xxl

a-font-primary-medium-xl

a-font-primary-medium-l

a-font-primary-medium-m

a-font-primary-medium-s

a-font-primary-medium-xs

a-font-primary-medium-xxs

primary-regular

a-font-primary-regular-xxl

a-font-primary-regular-xl

a-font-primary-regular-l

a-font-primary-regular-m

a-font-primary-regular-s

a-font-primary-regular-xs

a-font-primary-regular-xxs

secondary-bold

a-font-secondary-bold-xxl

a-font-secondary-bold-xl

a-font-secondary-bold-l

a-font-secondary-bold-m

a-font-secondary-bold-s

a-font-secondary-bold-xs

a-font-secondary-bold-xxs

body

a-font-body-xxl

a-font-body-xl

a-font-body-l

a-font-body-m

a-font-body-s

a-font-body-xs

a-font-body-xxs

property: background-color ( .lrv-u-background-color-* )

grey

lrv-u-background-color-grey-darkest

lrv-u-background-color-grey-dark

lrv-u-background-color-grey

lrv-u-background-color-grey-light

lrv-u-background-color-grey-lightest

brand-primary

lrv-u-background-color-brand-primary-darkest

lrv-u-background-color-brand-primary-dark

lrv-u-background-color-brand-primary

lrv-u-background-color-brand-primary-light

lrv-u-background-color-brand-primary-lightest

brand-secondary

lrv-u-background-color-brand-secondary-darkest

lrv-u-background-color-brand-secondary-dark

lrv-u-background-color-brand-secondary

lrv-u-background-color-brand-secondary-light

lrv-u-background-color-brand-secondary-lightest

accent

lrv-u-background-color-accent-darkest

lrv-u-background-color-accent-dark

lrv-u-background-color-accent

lrv-u-background-color-accent-light

lrv-u-background-color-accent-lightest

accent-a

lrv-u-background-color-accent-a-darkest

lrv-u-background-color-accent-a-dark

lrv-u-background-color-accent-a

lrv-u-background-color-accent-a-light

lrv-u-background-color-accent-a-lightest

property: border-color ( .lrv-u-border-color-* )

grey

lrv-u-border-color-grey-darkest

lrv-u-border-color-grey-dark

lrv-u-border-color-grey

lrv-u-border-color-grey-light

lrv-u-border-color-grey-lightest

brand-primary

lrv-u-border-color-brand-primary-darkest

lrv-u-border-color-brand-primary-dark

lrv-u-border-color-brand-primary

lrv-u-border-color-brand-primary-light

lrv-u-border-color-brand-primary-lightest

brand-secondary

lrv-u-border-color-brand-secondary-darkest

lrv-u-border-color-brand-secondary-dark

lrv-u-border-color-brand-secondary

lrv-u-border-color-brand-secondary-light

lrv-u-border-color-brand-secondary-lightest

accent

lrv-u-border-color-accent-darkest

lrv-u-border-color-accent-dark

lrv-u-border-color-accent

lrv-u-border-color-accent-light

lrv-u-border-color-accent-lightest

accent-a

lrv-u-border-color-accent-a-darkest

lrv-u-border-color-accent-a-dark

lrv-u-border-color-accent-a

lrv-u-border-color-accent-a-light

lrv-u-border-color-accent-a-lightest

property: color ( .lrv-u-color-* )

grey

Here is some text

lrv-u-color-grey-darkest

Here is some text

lrv-u-color-grey-dark

Here is some text

lrv-u-color-grey

Here is some text

lrv-u-color-grey-light

Here is some text

lrv-u-color-grey-lightest

brand-primary

Here is some text

lrv-u-color-brand-primary-darkest

Here is some text

lrv-u-color-brand-primary-dark

Here is some text

lrv-u-color-brand-primary

Here is some text

lrv-u-color-brand-primary-light

Here is some text

lrv-u-color-brand-primary-lightest

brand-secondary

Here is some text

lrv-u-color-brand-secondary-darkest

Here is some text

lrv-u-color-brand-secondary-dark

Here is some text

lrv-u-color-brand-secondary

Here is some text

lrv-u-color-brand-secondary-light

Here is some text

lrv-u-color-brand-secondary-lightest

accent

Here is some text

lrv-u-color-accent-darkest

Here is some text

lrv-u-color-accent-dark

Here is some text

lrv-u-color-accent

Here is some text

lrv-u-color-accent-light

Here is some text

lrv-u-color-accent-lightest

accent-a

Here is some text

lrv-u-color-accent-a-darkest

Here is some text

lrv-u-color-accent-a-dark

Here is some text

lrv-u-color-accent-a

Here is some text

lrv-u-color-accent-a-light

Here is some text

lrv-u-color-accent-a-lightest

Buttons

Brand Basic

Black

style-guide README

This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.

style-guide Twig The markup file.

{% include "@project/__tests__/style-guide/fonts.html" %}
{% include "@project/__tests__/style-guide/colors.html" %}

<div class="lrv-a-wrapper">
	<h2 style="background-color: whitesmoke;" class="lrv-u-padding-a-1 lrv-u-margin-b-2">Buttons</h2>

	<div class="lrv-a-grid lrv-a-cols2">
		<div class="lrv-a-grid-item">
			<h3>Brand Basic</h3>
			{% include "@larva/components/c-button/c-button.twig" with c_button_brand_basic %}
		</div>
		<div class="lrv-a-grid-item">
			<h3>Black</h3>
			{% include "@larva/components/c-button/c-button.twig" with c_button_black %}
		</div>
	</div>
</div>

style-guide JSON The data object for this pattern.

{
	"c_button_brand_basic": {
		"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-background-color-brand-primary lrv-u-color-white lrv-u-padding-a-1",
		"c_button_ga_tracking": {},
		"c_button_inner_classes": "",
		"c_button_rel_attr": "",
		"c_button_screen_reader_text": "Sign Up",
		"c_button_target_attr": "",
		"c_button_text": "Sign Up",
		"c_button_type_attr": "submit",
		"c_button_url": ""
	},
	"c_button_black": {
		"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-background-color-black lrv-u-color-white lrv-u-border-radius-5 lrv-u-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-2",
		"c_button_ga_tracking": {},
		"c_button_inner_classes": "",
		"c_button_rel_attr": "",
		"c_button_screen_reader_text": "Sign Up",
		"c_button_target_attr": "",
		"c_button_text": "Sign Up",
		"c_button_type_attr": "submit",
		"c_button_url": ""
	}
}