No notes defined.
<header class="tickertape">
<h1 class="tickertape__highlight">
This is an H1 in tickertape style
</h1>
</header>
<header class="tickertape">
<h2 class="tickertape__highlight">
This is an H2 in tickertape style
</h2>
</header>
<header class="tickertape">
<h3 class="tickertape__highlight">
This is an H3 in tickertape style
</h3>
</header>
<header class="tickertape">
<h4 class="tickertape__highlight">
This is an H4 in tickertape style
</h4>
</header>
<header class="tickertape">
<h5 class="tickertape__highlight">
This is an H5 in tickertape style
</h5>
</header>
<header class="tickertape">
<h6 class="tickertape__highlight">
This is an H6 in tickertape style
</h6>
</header>
<header class="tickertape">
<p class="tickertape__highlight">
This is a paragraph on white in tickertape style
</p>
</header>
<hr />
<div class="slab slab--bg-gradient-grey align-full">
<div class="slab__inner">
<div class="wrap">
<header class="tickertape tickertape--bg-secondary">
<h1 class="tickertape__highlight">
This is an H1 in secondary tickertape style
</h1>
</header>
<header class="tickertape tickertape--bg-white">
<p class="tickertape__highlight">
This is a paragraph on white in tickertape style
</p>
</header>
<header class="tickertape">
<h2 class="tickertape__highlight h3">
This is an H2 sized as an H3
</h2>
</header>
<header class="tickertape tickertape--bg-secondary">
<h3 class="tickertape__highlight h5">
This is an H3 on secondary sized as an H5
</h3>
</header>
<header class="tickertape">
<h4 class="tickertape__highlight">
This is an H4 on primary
</h4>
</header>
<header class="tickertape">
<p class="tickertape__highlight">
This is a paragraph on primary in tickertape style
</p>
</header>
</div>
</div>
</div>
<div class="slab slab--bg-gradient-blue align-full">
<div class="slab__inner">
<div class="wrap">
<header class="tickertape tickertape--bg-secondary h1 text-center">
<div class="tickertape__highlight">
This is a div container in secondary, with extra <code>h1</code> and <code>text-center</code> utility classes
</div>
</header>
<header class="tickertape tickertape--bg-white intro-xl text-center">
<p class="tickertape__highlight">
Though maybe consider making your own component at this point
</p>
</header>
</div>
</div>
</div>
{% include '@tickertape' with {
text: 'This is an H1 in tickertape style',
textElement: 'h1'
} %}
{% include '@tickertape' with {
text: 'This is an H2 in tickertape style',
textElement: 'h2'
} %}
{% include '@tickertape' with {
text: 'This is an H3 in tickertape style',
textElement: 'h3'
} %}
{% include '@tickertape' with {
text: 'This is an H4 in tickertape style',
textElement: 'h4'
} %}
{% include '@tickertape' with {
text: 'This is an H5 in tickertape style',
textElement: 'h5'
} %}
{% include '@tickertape' with {
text: 'This is an H6 in tickertape style',
textElement: 'h6'
} %}
{% include '@tickertape' with {
text: 'This is a paragraph on white in tickertape style',
textElement: 'p'
} %}
<hr/>
<div class="slab slab--bg-gradient-grey align-full">
<div class="slab__inner">
<div class="wrap">
{% include '@tickertape' with {
text: 'This is an H1 in secondary tickertape style',
textElement: 'h1',
background: 'secondary'
} %}
{% include '@tickertape' with {
text: 'This is a paragraph on white in tickertape style',
textElement: 'p',
background: 'white'
} %}
{% include '@tickertape' with {
text: 'This is an H2 sized as an H3',
textElement: 'h2',
textElementStyle: 'h3',
} %}
{% include '@tickertape' with {
text: 'This is an H3 on secondary sized as an H5',
textElement: 'h3',
textElementStyle: 'h5',
background: 'secondary'
} %}
{% include '@tickertape' with {
text: 'This is an H4 on primary',
textElement: 'h4'
} %}
{% include '@tickertape' with {
text: 'This is a paragraph on primary in tickertape style',
textElement: 'p'
} %}
</div>
</div>
</div>
<div class="slab slab--bg-gradient-blue align-full">
<div class="slab__inner">
<div class="wrap">
{% include '@tickertape' with {
text: 'This is a div container in secondary, with extra <code>h1</code> and <code>text-center</code> utility classes',
textElement: 'div',
background: 'secondary',
extraClasses: ['h1', 'text-center']
} %}
{% include '@tickertape' with {
text: 'Though maybe consider making your own component at this point',
textElement: 'p',
background: 'white',
extraClasses: ['intro-xl', 'text-center']
} %}
</div>
</div>
</div>
$tickertape-bg-colors: (
'primary': $primary,
'secondary': $secondary,
'tertiary': $tertiary,
'white': white,
);
.tickertape {
position: relative;
--background: #{$primary};
--color: white;
margin-bottom: $spacing-lg;
margin-right: $spacing-md;
text-wrap: balance;
+ .tickertape {
margin-top: -$spacing-md;
}
&__highlight {
position: relative;
display: inline;
left: 0.35rem;
padding: 0.1rem;
line-height: 1.55; // just enough to show 1px between lines at 1rem+
background: $primary;
background: var(--background, #{$primary});
color: var(--color, white);
box-shadow: -0.35rem 0 0 0 var(--background, #{$primary}), 0.35rem 0 0 0 var(--background, #{$primary});
box-decoration-break: clone;
border-radius: $border-radius-sm;
//border-top: 0.25rem solid transparent;
//border-bottom: 0.25rem solid transparent;
a {
color: white;
color: var(--color);
}
&:where(h1) {
line-height: 1.45;
}
}
}
@each $name, $value in $tickertape-bg-colors {
.tickertape--bg-#{$name} {
--background: #{$value};
--color: #{choose-contrast-color-prefer-white($value)};
}
}