We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

<template>
  <anchor-container>This is an error message.</anchor-container>
</template>

<script setup>
import { AnchorContainer } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-container>This is an error message.</anchor-container>
</template>

Custom Width

Use the --container-width-max CSS custom property to control the maximum width of the container content. By default, the container constrains content to a predefined maximum width. You can override this to suit your layout needs:

anchor-container {
  --container-width-max: 1200px;
}

To allow the container to stretch to full width, set the max width to 100%:

anchor-container {
  --container-width-max: 100%;
}

Custom Margins

Override the horizontal margins per breakpoint using the --container-margin-* CSS custom properties. Each breakpoint has its own variable so you can fine-tune spacing as the viewport changes:

anchor-container {
  --container-margin-xs: 8px;
  --container-margin-sm: 16px;
  --container-margin-md: 24px;
  --container-margin-lg: 32px;
  --container-margin-xl: 48px;
}

CSS variables

The Container component exposes the following CSS custom properties for styling and layout control:

Accessibility

The Container component is a non-semantic wrapper element. It does not add any ARIA roles, states, or semantic meaning to its content. It serves purely as a layout container for constraining and centering content within the viewport.

API

anchor-container

CSS Custom Properties

Built with StencilJS