@ewc-lib/ewc-banner
v2.0.2-alpha
Published
Downloads
477
Keywords
Readme
Screenshot
API
There are the following attributes:
- maintitle - sets the headline text
- subtitle - sets the subtitle text
Note: All attributes have an effect when changed at runtime.
Customisations
Ribbon hiding
The ribbon hiding can be customised (by disabling the default and specifying it again) in the following way:
<style>
@media (max-width: 1200px) {
.ewc-banner__ribbon { display: revert; }
}
@media (max-width: 900px) {
.ewc-banner__ribbon { display: none; }
}
</style>Logo hiding
<style> .ewc-banner__logo {visibility: hidden;} </style>Height
The default height is 128px and can be modified like this:
<style>
.ewc-banner__container {height:80px;}
.ewc-banner__ribbon {height:80px;}
</style>Gradient style
There are 3 styles predefined (--gradient-version-1 to --gradient-version-3).
It can be selected like this:
<ewc-banner
style="--gradient-selection: var(--gradient-version-1);">
</ewc-banner>Usage with WebPack
package.json
"dependencies": {
"@ewc-lib/ewc-banner": "^1.0.0"
}webpack.config.js
...
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
}
]
}
...index.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Arial', sans-serif;
margin: 0;
}
</style>
</head>
<body>
<script src="bundle.js"></script>
<!-- example for overwriting the ribbon hiding. it's not mandatory -->
<style>
@media (max-width: 1200px) {
.ewc-banner__ribbon {
display: revert;
}
}
@media (max-width: 900px) {
.ewc-banner__ribbon {
display: none;
}
}
</style>
<ewc-banner mainTitle="Demonstration of a title in a banner" subTitle="Demonstration of a subtitle"></ewc-banner>
</body>
</html>index.js
import "@ewc-lib/ewc-css/ewc.css"
import "@ewc-lib/ewc-banner"