project modules: `sub-header`

Available Variants

prototype

Market

sub-header README

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

sub-header Twig The markup file.

{% if o_sub_header %}
	<div class="sub-header // {{ sub_header_classes }} lrv-u-padding-t-1 u-padding-t-2@desktop-xl u-padding-b-1@mobile-max">
		<div class="lrv-a-wrapper">
			{% include "@project/objects/o-sub-header/o-sub-header.twig" with o_sub_header %}
		</div>
	</div>
{% endif %}

sub-header JSON The data object for this pattern.

{
	"sub_header_classes": "u-background-color-brand-secondary ",
	"o_sub_header": {
		"o_sub_header_classes": "",
		"c_heading": {
			"c_heading_classes": "lrv-u-font-family-secondary lrv-u-font-size-40 lrv-u-font-size-36@desktop lrv-u-font-size-18@mobile-max lrv-u-margin-b-050@mobile-max lrv-u-line-height-small lrv-u-text-align-center@mobile-max u-margin-r-2@tablet lrv-u-text-transform-uppercase",
			"c_heading_id_attr": "section-heading",
			"c_heading_text": "Market",
			"c_heading_url": "",
			"c_heading_link_classes": "",
			"c_heading_outer": false,
			"c_heading_outer_classes": "",
			"c_heading_is_primary_heading": true
		},
		"o_nav": {
			"modifier_class": "",
			"o_nav_classes": "lrv-u-text-align-center@mobile-max lrv-js-MobileHeightToggle",
			"o_nav_title_text": "All",
			"o_nav_title_id_attr": "",
			"o_nav_title_classes": "a-hidden@tablet lrv-js-MobileHeightToggle-trigger lrv-a-icon-after lrv-a-icon-arrow-down lrv-u-font-size-16 lrv-u-font-family-primary lrv-u-font-weight-normal lrv-u-padding-tb-050 lrv-u-width-100p@mobile-max lrv-u-border-a-1@mobile-max lrv-u-justify-content-center lrv-u-margin-b-050@mobile-max u-border-color-brand-secondary@mobile-max u-background-white@mobile-max a-font-primary-medium-m u-padding-b-050@tablet u-padding-a-050@mobile-max",
			"o_nav_aria_labelledby_attr": "",
			"o_nav_screen_reader_id_attr": "optional-screen-reader",
			"o_nav_screen_reader_text": "optional screen reader",
			"o_nav_list_classes": "lrv-a-unstyle-list lrv-js-MobileHeightToggle-target lrv-u-flex lrv-u-flex-direction-column@mobile-max  lrv-u-line-height-large u-flex-wrap-wrap a-space-children--250 lrv-a-space-children-horizontal@tablet",
			"o_nav_list_item_classes": "lrv-u-border-a-1@mobile-max lrv-u-justify-content-center lrv-u-margin-b-050@mobile-max u-border-color-brand-secondary@mobile-max u-background-white@mobile-max a-font-primary-medium-m u-padding-b-050@tablet u-padding-a-050@mobile-max",
			"o_nav_list_items": [
				{
					"modifier_class": "",
					"c_link_classes": "lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-color-grey-dark u-color-brand-primary:hover@tablet a-hover-effect--underline-3@tablet",
					"c_link_text": "Tag Title",
					"c_link_url": "#",
					"c_link_rel_attr": false,
					"c_link_aria_label_attr": false,
					"c_link_target_attr": false
				},
				{
					"modifier_class": "",
					"c_link_classes": "lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-color-grey-dark u-color-brand-primary:hover@tablet a-hover-effect--underline-3@tablet",
					"c_link_text": "Tag Title",
					"c_link_url": "#",
					"c_link_rel_attr": false,
					"c_link_aria_label_attr": false,
					"c_link_target_attr": false
				},
				{
					"modifier_class": "",
					"c_link_classes": "lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-color-grey-dark u-color-brand-primary:hover@tablet a-hover-effect--underline-3@tablet",
					"c_link_text": "Tag Title",
					"c_link_url": "#",
					"c_link_rel_attr": false,
					"c_link_aria_label_attr": false,
					"c_link_target_attr": false
				},
				{
					"modifier_class": "",
					"c_link_classes": "lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-color-grey-dark u-color-brand-primary:hover@tablet a-hover-effect--underline-3@tablet",
					"c_link_text": "Tag Title",
					"c_link_url": "#",
					"c_link_rel_attr": false,
					"c_link_aria_label_attr": false,
					"c_link_target_attr": false
				},
				{
					"modifier_class": "",
					"c_link_classes": "lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-color-grey-dark u-color-brand-primary:hover@tablet a-hover-effect--underline-3@tablet",
					"c_link_text": "Tag Title",
					"c_link_url": "#",
					"c_link_rel_attr": false,
					"c_link_aria_label_attr": false,
					"c_link_target_attr": false
				}
			],
			"o_nav_list_labelledby_attr": ""
		}
	}
}