Design

No Framework#
  • Build with Tinka style without build tools
  • Building embedded components
  • Mix Tinka style with your choice of styling framework

Build with Tinka style without build tools#

Reference the stylesheet in your webpage like this:

<head>
  <link rel="stylesheet" href="https://www.tinka.nl/assets/styles/plain.css" />
</head>

All the documented components are available. Check the respective page for the recommended markup.

Since the stylesheet is generated from the source (via Tailwind), some often-used utility classes are also available. The following are some of the utility classes recommended for layout consistency.

Attention!#
  • The hosted plain.css can change anytime, if you want a stable version, please download a local copy.
  • plain.css is a great way to prototype or to experiment! However, a proper framework is recommended for production products, one of the best reasons is that we've put a lot of accessbility works into the components. At the moment We recommend using Next.js.

Building embedded components#

Tinka has created some embeds (so-called Merchant Components) for our business partners to put our service on their checkout page. The design system and the UI library are designed to support this use-case from day-one.

We provide a quick way to get started with Tinka style with scoped.css

<head>
  <!-- inserted either by the script or by the merchant themself -->
  <link rel="stylesheet" href="https://www.tinka.nl/assets/styles/scoped.css" />
</head>
<body>
  <tinka-widget class="tinka">
    <!-- elements inside .tinka will receive styling from scoped.css -->
    <span class="ui-title">pay in 3</span>
  </tinka-widtget>
</body>

We will monitor the actual usage to adapt to the actual implementation of the embed developers. Please get in touch to shape this feature together!

Attention!#
  • scoped.css does not contain components that are intended to be used on Tinka pages, such as site-header and mobile-menu.

Alternatives#
  • Are you using Svelte to build the embeds? In this case you can setup Tailwind with @tinka/tailwindcss. See Svelte for more information.
  • Are you using CSS Modules? You can also download the plain.css and import needed styles.
  • Do let us know what your plan is, so we can best support your use-case!