Style Guide for Asahi Group Web Apps

# Getting Started

# Why Web Components

Web Components are native web technology supported by all notable browsers. They can be used within any frontend framework like React, VueJS, Angular… or within a good old HTML template in MVC architecture.

Advantages of using Web Components:

  1. Consistent look, feel and behavior across the whole app ecosystem.
  2. They save work and time. There is no need to develop key elements over and over again.
  3. Future changes can be done from one place only (Asahi CDN). No need to update each app separately.

# How To Use Them

The web components will be available at the Asahi CDN.

The components can be used in you application like this:

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.eu.asahibeer.com/prazdroj-theme.js" async></script>
  <script src="https://cdn.eu.asahibeer.com/runtime.bundle.js" async></script>
  <script src="https://cdn.eu.asahibeer.com/theme.bundle.js" async></script>
  <script src="https://cdn.eu.asahibeer.com/asahi-portal-chrome.js" async></script>
  <script src="https://cdn.eu.asahibeer.com/asahi-button.js" async></script>
  <script src="https://cdn.eu.asahibeer.com/asahi-dropdown.js" async></script>
  <script src="https://cdn.eu.asahibeer.com/asahi-icon.js" async></script>
  <!--
    other components
  -->
</head>

<body style="margin: 0; padding: 0;">
 <asahi-portal-chrome user='{"username": "Example User"}'>
  <asahi-button>
    Click Me
    <span style="margin-left: 5px">»</span>
  </asahi-button>
</asahi-portal-chrome>
</body>

</html>

Notes:

  • Every component has attached shadow root
  • Keep in mind, that some components require another to work properly

# Browser Support

Web components will support all modern browsers with significant market share:

  • Desktop: Chrome, Safari, Firefox, Microsoft Edge
  • Android: Chrome for Android
  • iOS: iOS Safari

← Chrome →