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-grid-row>
    <anchor-grid-column column="4">Column 1</anchor-grid-column>
    <anchor-grid-column column="8">Column 2</anchor-grid-column>
  </anchor-grid-row>
</template>

<script setup>
import { AnchorGridRow, AnchorGridColumn } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-grid-row>
    <anchor-grid-column column="4">Column 1</anchor-grid-column>
    <anchor-grid-column column="8">Column 2</anchor-grid-column>
  </anchor-grid-row>
</template>

Grid Columns

Control the number of columns in the grid using the --grid-row-columns-* CSS custom properties. Each breakpoint (xs, sm, md, lg, xl) has its own variable, allowing you to define a different column count per viewport size:

anchor-grid-row {
  --grid-row-columns-xs: 4;
  --grid-row-columns-sm: 6;
  --grid-row-columns-md: 8;
  --grid-row-columns-lg: 12;
  --grid-row-columns-xl: 12;
}

Grid Gutter

The gutter defines the vertical space between rows. Adjust it per breakpoint using --grid-row-gutter-*:

anchor-grid-row {
  --grid-row-gutter-xs: 8px;
  --grid-row-gutter-sm: 12px;
  --grid-row-gutter-md: 16px;
  --grid-row-gutter-lg: 24px;
  --grid-row-gutter-xl: 32px;
}

Horizontal Gap

The horizontal gap controls the space between columns within a row. Set it per breakpoint using --grid-row-horizontal-gap-*:

anchor-grid-row {
  --grid-row-horizontal-gap-xs: 8px;
  --grid-row-horizontal-gap-sm: 12px;
  --grid-row-horizontal-gap-md: 16px;
  --grid-row-horizontal-gap-lg: 24px;
  --grid-row-horizontal-gap-xl: 32px;
}

CSS variables

The Grid Row component exposes the following CSS custom properties for configuring grid layout behavior:

Accessibility

The Grid Row component is a non-visual layout element. It does not add any ARIA roles, states, or semantic meaning to its content. It serves purely as a structural container for organizing child grid columns into a responsive row layout.

API

anchor-grid-row

CSS Custom Properties

Built with StencilJS