project modules: subscribe-landing-page
Available Variants
prototypeSubscribe to the leading source for Sports Business News.
Sportico is the leading provider of news, data, insights, strategies, leadership and live media experiences for professionals in the $500 billion sports industry.
Unparalleled coverage of the $500 billion business of sports.
Led by industry veterans Dick Glover, Scott Soshnick and an editorial team of the most accomplished journalists and visionaries in the field, Sportico empowers readers with the news, context and insights needed to understand an evolving sports ecosystem – where teams are incubators and innovation labs, franchise values are soaring, and athletes will not stick to sports.
subscribe-landing-page README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
subscribe-landing-page Twig The markup file.
<header class="header // js-Header u-order-1@desktop u-z-index-middle u-position-relative a-subscribe-page-header" style="min-height: auto;">
<div class="js-Header-contents lrv-u-flex lrv-u-justify-content-space-between">
<div class="js-hide-when-sticky lrv-u-width-100p lrv-u-padding-t-125 lrv-u-padding-b-125 lrv-u-padding-lr-075 lrv-u-padding-l-150@desktop lrv-u-padding-r-2@desktop lrv-u-padding-lr-1@tablet lrv-u-background-color-white">
<div class="lrv-u-flex lrv-u-align-items-center">
<div class="lrv-u-text-align-left lrv-u-width-200 lrv-u-flex u-flex-grow-1@desktop">
<div class="lrv-u-flex u-align-items-flex-end lrv-u-padding-r-150 lrv-u-padding-r-00@desktop">
{% include "@project/components/c-logo/c-logo.twig" with c_logo %}
</div>
</div>
<div class="lrv-u-flex-shrink-0 u-margin-lr-auto@desktop-max u-flex-order-n1@desktop u-padding-lr-1@desktop lrv-u-flex lrv-u-align-items-center u-height-30 u-max-width-180 "></div>
<div class="lrv-u-flex lrv-u-align-items-center lrv-u-border-color-grey-light">
<span class="lrv-u-color-brand-primary lrv-u-font-family-primary lrv-u-font-size-16 lrv-u-font-size-18 lrv-u-font-weight-bold lrv-u-margin-r-1">
{{ subs_header_text }}
</span>
<div id="pmc-piano-reg-header-button" class="pmc-subs-piano-reg-header lrv-u-flex lrv-u-padding-a-050@desktop lrv-u-padding-a-1 u-width-160 lrv-u-margin-r-2 lrv-u-justify-content-center"></div>
</div>
</div>
</div>
<div class="js-show-when-sticky js-sticky-header-slidedown lrv-u-background-color-white lrv-u-width-100p a-subscribe-page-header lrv-u-flex lrv-u-align-items-center">
<div class="lrv-u-flex lrv-u-align-items-center">
<div class="lrv-u-overflow-auto lrv-u-flex u-flex-grow-1@desktop">
<div class="
lrv-u-align-items-center
lrv-u-flex
lrv-u-justify-content-center
lrv-u-margin-l-1
lrv-u-padding-a-050@desktop
lrv-u-width-100
lrv-u-overflow-hidden
">
{% include "@project/components/c-logo/c-logo.twig" with c_logo %}
</div>
</div>
<div class="lrv-u-flex-shrink-0 u-margin-lr-auto@desktop-max u-flex-order-n1@desktop u-padding-lr-1@desktop lrv-u-flex lrv-u-align-items-center u-height-30 u-max-width-180 "></div>
<div class="lrv-u-flex lrv-u-align-items-center lrv-u-border-color-grey-light">
<span class="
lrv-u-color-brand-primary
lrv-u-font-family-primary
lrv-u-font-size-10
lrv-u-font-size-18@desktop
lrv-u-font-weight-bold@desktop
lrv-u-text-align-right
lrv-u-tesxt-align-left@desktop
lrv-u-margin-r-1@desktop
">
{{ subs_header_text }}
</span>
<div id="pmc-piano-reg-header-sticky-button" class="
pmc-subs-piano-reg-header
lrv-u-flex
lrv-u-padding-a-050
lrv-u-padding-a-1@desktop
u-width-160
lrv-u-margin-r-2@desktop
lrv-u-justify-content-center
"></div>
</div>
</div>
</div>
</div>
</header>
<section>
<div
class="
section-header-text
lrv-u-margin-t-2
lrv-u-margin-tb-1@mobile-max
lrv-u-padding-lr-1
lrv-u-padding-lr-00@desktop
">
<!-- Spacer to provide mobile padding only -->
<div style="height: 52px" class="lrv-a-hidden\@desktop-max"></div>
{% if c_heading %}
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
{% endif %}
{% if c_dek %}
{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
{% endif %}
</div>
<div class="piano-subscription-offers-wrapper" style="background-image: url({{ img_src_url_piano_background }})">
<div id="piano-subscription-offers" class="lrv-u-width-75p@desktop lrv-u-width-100p lrv-u-text-align-center lrv-u-margin-lr-auto lrv-u-padding-a-1 lrv-u-padding-tb-2@desktop"></div>
</div>
<div class="lrv-u-width-100p lrv-u-padding-lr-1 lrv-u-background-color-black">
<div class="lrv-u-flex lrv-u-width-100p@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-margin-l-auto lrv-u-margin-r-auto lrv-u-align-items-center u-grid-gap-0 lrv-u-color-white a-subscribe-busisness-section">
<div class="lrv-u-flex lrv-u-flex-direction-column lrv-u-width-30p lrv-u-width-100p@mobile-max">
{% if c_tagline1 %}
{% include "@larva/components/c-heading/c-heading.twig" with c_tagline1 %}
{% endif %}
</div>
<div class="lrv-u-flex lrv-u-flex-direction-column lrv-u-width-75p lrv-u-width-100p@mobile-max lrv-u-justify-content-center lrv-u-padding-lr-2@desktop">
{% if c_tagline %}
{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
{% endif %}
</div>
</div>
</div>
{% if subs_cards %}
{% for item in subs_cards %}
{% include "@project/modules/subscription-page-card/subscription-page-card.twig" with item %}
{% endfor %}
{% endif %}
</section>
<footer class="subscription-footer lrv-u-background-color-black lrv-u-color-white lrv-u-padding-t-1 lrv-u-padding-b-2">
<div class="lrv-a-wrapper">
<div class="lrv-u-flex">
<div class="lrv-u-text-align-center lrv-u-padding-tb-075 lrv-u-flex@desktop lrv-u-align-items-center lrv-u-width-100p">
{% if o_nav %}
{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
{% endif %}
</div>
</div>
<div class="lrv-u-flex">
<div class="lrv-u-width-100p lrv-u-text-align-center lrv-u-flex@desktop lrv-u-align-items-center a-font-primary lrv-u-font-size-14 lrv-u-font-size-12@mobile-max lrv-u-text-align-center lrv-u-color-grey-light">
{% if footer_c_tagline %}
{% include "@larva/components/c-tagline/c-tagline.twig" with footer_c_tagline %}
{% endif %}
</div>
</div>
</div>
</footer>
subscribe-landing-page JSON The data object for this pattern.
{
"header_classes": "u-box-shadow-header@tablet u-z-index-middle u-position-relative",
"header_contents_classes": "lrv-u-background-color-white",
"c_logo": {
"c_logo_is_h1": true,
"c_logo_classes": "",
"c_logo_url": "/",
"c_logo_svg": "sportico-logo",
"c_logo_screen_reader_text": "Sportico"
},
"c_heading": {
"c_heading_classes": "lrv-u-width-100p@mobile-max lrv-u-margin-l-auto lrv-u-margin-r-auto lrv-u-padding-lr-1@mobile-max lrv-u-text-align-center a-font-primary lrv-u-padding-t-075",
"c_heading_id_attr": "section-heading",
"c_heading_text": "Subscribe to the leading source for Sports Business News.",
"c_heading_url": "",
"c_heading_link_classes": "",
"c_heading_outer": false,
"c_heading_outer_classes": "",
"c_heading_is_primary_heading": "true"
},
"c_title": {
"c_title_classes": "",
"c_title_tag_text": "",
"c_title_id_attr": "title-of-a-story",
"c_title_text": "Title of a story",
"c_title_markup": "",
"c_title_link_classes": "",
"c_title_url": "#"
},
"c_dek": {
"c_dek_classes": "lrv-u-width-100p@mobile-max lrv-u-font-size-16 lrv-u-font-size-24@desktop lrv-u-margin-l-auto lrv-u-margin-r-auto lrv-u-text-align-center a-font-primary lrv-u-margin-tb-075",
"c_dek_markup": "",
"c_dek_text": "Sportico is the leading provider of news, data, insights, strategies, leadership and live media experiences for professionals in the $500 billion sports industry."
},
"c_tagline": {
"c_tagline_classes": "a-font-primary lrv-u-padding-lr-2@desktop lrv-u-margin-tb-00 lrv-u-margin-t-050@mobile-max lrv-u-margin-b-1@mobile-max lrv-u-text-align-center@mobile-max",
"c_tagline_text": "Led by industry veterans Dick Glover, Scott Soshnick and an editorial team of the most accomplished journalists and visionaries in the field, Sportico empowers readers with the news, context and insights needed to understand an evolving sports ecosystem – where teams are incubators and innovation labs, franchise values are soaring, and athletes will not stick to sports."
},
"c_tagline1": {
"c_heading_classes": "lrv-u-font-size-24 lrv-u-font-size-36@desktop a-font-primary lrv-u-margin-tb-050 lrv-u-font-size-22@mobile-max lrv-u-text-align-center@mobile-max",
"c_heading_id_attr": "section-heading",
"c_heading_text": "Unparalleled coverage of the $500 billion business of sports. ",
"c_heading_url": "",
"c_heading_link_classes": "",
"c_heading_outer": false,
"c_heading_outer_classes": "",
"c_heading_is_primary_heading": false
},
"img_src_url_piano_background": "",
"c_lazy_image": {
"c_lazy_image_classes": "u-width-100 u-width-80@tablet",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": false,
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
"c_lazy_image_sizes_attr": "auto",
"c_lazy_image_img_classes": "lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
},
"o_nav": {
"modifier_class": "",
"o_nav_classes": "lrv-u-width-100p a-font-primary lrv-u-font-size-14 lrv-u-font-size-12@mobile-max",
"o_nav_title_text": "",
"o_nav_title_id_attr": "",
"o_nav_title_classes": "",
"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-a-unstyle-list lrv-u-flex lrv-u-flex-wrap-wrap lrv-u-justify-content-center lrv-a-space-children-horizontal lrv-u-tb-padding-050 lrv-a-space-children--1 subscription-footer-list",
"o_nav_list_item_classes": "",
"o_nav_list_items": [
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-light lrv-u-color-white:hover lrv-u-line-height-copy",
"c_link_text": "Terms of Use",
"c_link_url": "https://pmc.com/terms-of-use/",
"c_link_rel_attr": "noopener",
"c_link_aria_label_attr": false,
"c_link_target_attr": "_blank"
},
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-light lrv-u-color-white:hover lrv-u-line-height-copy",
"c_link_text": "Privacy Policy",
"c_link_url": "https://pmc.com/privacy-policy/",
"c_link_rel_attr": "noopener",
"c_link_aria_label_attr": false,
"c_link_target_attr": "_blank"
},
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-light lrv-u-color-white:hover lrv-u-line-height-copy",
"c_link_text": "California Privacy Rights",
"c_link_url": "https://pmc.com/privacy-policy/#california",
"c_link_rel_attr": "noopener",
"c_link_aria_label_attr": false,
"c_link_target_attr": "_blank"
},
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-light lrv-u-color-white:hover lrv-u-line-height-copy",
"c_link_text": "AdChoices",
"c_link_url": "https://optout.aboutads.info/?c=2&lang=EN",
"c_link_rel_attr": "noopener",
"c_link_aria_label_attr": false,
"c_link_target_attr": "_blank"
},
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-light lrv-u-color-white:hover lrv-u-line-height-copy",
"c_link_text": "Do Not Sell My Personal Information",
"c_link_url": "https://pmc.com/california-opt-out-of-sale-of-data/",
"c_link_rel_attr": "noopener",
"c_link_aria_label_attr": false,
"c_link_target_attr": "_blank"
}
],
"o_nav_list_labelledby_attr": ""
},
"footer_c_tagline": {
"c_tagline_classes": "c-tagline lrv-u-width-100p lrv-u-margin-a-00",
"c_tagline_text": ""
},
"subs_cards": []
}