Credit Warning#

According to the regulation in the Netherlands, any page that advertising money lending must display this warning all the time.

HTML & CSS#

Properties

Fixed

fixed

afm-credit-warning-fixed should be used when implementing web pages.
afm-credit-warning-placeholder can be used to push down content to prevent the banner from hiding page content.
afm-credit-warning should be used when impelmenting block content with the warning banner.

<html>
  <body>
    <div class="afm-credit-warning-fixed"></div>
    <div class="afm-credit-warning-placeholder"></div>
    <!-- ... -->
  </body>
</html>

Z-Index when using `afm-credit-warning-fixed`#

The utility class does not specify z-index, as it can be very context-dependent to pick the right number. Here are a few ideas on how to specify it:

Using Plain HTML: add style="z-index:99999" to the tag.
Using TailwindCSS 3+: add class z-50, or even z-[99999].
Using React: add style={{zIndex: 99999}} to the tag.

It does not have to be 99999, but it needs to be high enough so it is not obstructed at any point of scroll.

Sizing#

Use afm-credit-warning-sm and afm-credit-warning-xs to render smaller warning banners.

regular
small afm-credit-warning-sm
extra small afm-credit-warning-xs

Guideline:#

ALWAYS use regular size on Tinka's own domains and user flows.
ALWAYS use the biggest possible size.
ALWAYS use the same size for the primary content and the warning banner. In other words, the ratio between font size of the warning and the contenxt should be 1:1.
Only use small when the primary text size on the page is small. Example:

Buy now pay later for X months with Tinka

Only use extra small when the primary text size on the page is extra small. Example: