Installation

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

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');

YourComponent.vue

<template>
  <anchor-container>
    <anchor-grid-row>
      <anchor-grid-column column="1">1</anchor-grid-column>
      <anchor-grid-column column="1">2</anchor-grid-column>
      <anchor-grid-column column="1">3</anchor-grid-column>
      <anchor-grid-column column="1">4</anchor-grid-column>
    </anchor-grid-row>
  </anchor-container>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

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

Column Span

Use the column prop to define how many columns the grid-column should span at the default (mobile) screen size. Accepts values from 1 to 4:

<template>
  <anchor-grid-column column="2">
    Spans 2 columns on mobile
  </anchor-grid-column>
</template>

Define breakpoint-specific column spans using sm-column, md-column, lg-column, and xl-column. These override the default column value at their respective breakpoints, enabling mobile-first responsive layouts:

<template>
  <anchor-grid-row>
    <anchor-grid-column column="4" md-column="6" lg-column="8">
      Spans 4 columns on mobile, 6 on medium, 8 on large screens
    </anchor-grid-column>
    <anchor-grid-column column="4" md-column="6" lg-column="4">
      Spans 4 columns on mobile, 6 on medium, 4 on large screens
    </anchor-grid-column>
  </anchor-grid-row>
</template>

Accessibility

The Grid Column 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 occupying a defined span within a parent grid row.

API

anchor-grid-column

Properties

Property	Attribute	Description	Type	Default
`column`	`column`	Set the number of columns the grid-column should span in the default screen size (mobile).	`1 \| 2 \| 3 \| 4`	`undefined`
`lgColumn`	`lg-column`	Set the number of columns the grid-column should span in the large screen size.	`1 \| 10 \| 11 \| 12 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9`	`undefined`
`mdColumn`	`md-column`	Set the number of columns the grid-column should span in the medium screen size.	`1 \| 10 \| 11 \| 12 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9`	`undefined`
`smColumn`	`sm-column`	Set the number of columns the grid-column should span in the small screen size.	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	`undefined`
`xlColumn`	`xl-column`	Set the number of columns the grid-column should span in the extra large screen size.	`1 \| 10 \| 11 \| 12 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9`	`undefined`

Built with StencilJS

Anchor version	Status	Notes
3.0	Ready for Implementation	This component is in sync with Figma.

Grid column3.0