Template:Header Notch

{{#css: margin: 1rem 0; font-size: unset; }
 * 1) custom-header-notch {

margin: 1rem 0; font-size: unset; }
 * 1) custom-header-notch-color {

display: inline-block; min-width: 15.6rem; padding: 0.35em 3.25em 0.35em 0.75em; font: 700 1.3rem / 1 "Roboto Condensed", sans-serif; color: white; background-color: {{{Color|#921131}}}; clip-path: polygon(0 0, 100% 0, calc(100% - 2.5em) 100%, 0 100%); }
 * 1) custom-header-notch .header {

display: inline-block; min-width: 15.6rem; padding: 0.35em 3.25em 0.35em 0.75em; font: 700 1.3rem / 1 "Roboto Condensed", sans-serif; color: white; background-color: {{{Color|{{{2|}}}}}}; clip-path: polygon(0 0, 100% 0, calc(100% - 2.5em) 100%, 0 100%); }}{{#if: {{{2|}}}| {{{1|}}} | {{{1|}}} }} ==Description== This is a header template with a little notch at the right side. TO DO
 * 1) custom-header-notch-color .header {
 * Increase overall flexibility in regards to:
 * 1) Flexible font size adjustment (✔ Done)
 * 2) Flexible text length (✔ Done)
 * 3) A minimum width for short text (✔ Done)
 * 4) Multiple sizes?

Example Usage 1
Default

Example:

Example Usage 2
With longer text

Example:

Example Usage 3
With another color