Offsets

apps/www/src/components/Offsets.astro · 77 lines · group Features & lists

Used by

skattedosan.se /en/ × 2
skattedosan.se / × 2history: commit 1396f74 (2026-08-18)

Live sites: skattedosan.se.

Samples 2

skattedosan.se/en/

Big possibilities in small size

The technical aspect is expanding significantly, featuring Control Units storing over 32 million records with memory capacities ranging from 8GB to 128GB

Multiple devices support

Skattedosan is seamlessly adaptable and compatible with various cash solutions, requiring no external power source.

High capacity

Skattedosan boasts unmatched capabilities, storing 32+ million receipts, accommodating up to 1000 new organization numbers/cash pages, and supporting 9000 users. With a robust design, it withstands temperatures as low as -20°C, making it resilient in challenging environments.

Certified

Ensuring safety, Skattedosan is double-certified, meeting the regulations of the Swedish Tax Agency and earning certification from Kassacertifiering.se, distinguishing it in the industry.

MDX of this sample

import DatabaseIcon from 'astro-heroicons/outline/CircleStack.astro';
import TemplateIcon from 'astro-heroicons/outline/RectangleGroup.astro';
import LockClosedIcon from 'astro-heroicons/outline/LockClosed.astro';

<Offsets
    title="Big possibilities in small size"
    subtitle="The technical aspect is expanding significantly, featuring Control Units storing over 32 million records with memory capacities ranging from 8GB to 128GB"
    features={[
        {
            name: 'Multiple devices support',
            description: 'Skattedosan is seamlessly adaptable and compatible with various cash solutions, requiring no external power source.',
            Icon: DatabaseIcon
        },
        {
            name: 'High capacity',
            description: 'Skattedosan boasts unmatched capabilities, storing 32+ million receipts, accommodating up to 1000 new organization numbers/cash pages, and supporting 9000 users. With a robust design, it withstands temperatures as low as -20°C, making it resilient in challenging environments.',
            Icon: TemplateIcon
        },
        {
            name: 'Certified',
            description: 'Ensuring safety, Skattedosan is double-certified, meeting the regulations of the Swedish Tax Agency and earning certification from Kassacertifiering.se, distinguishing it in the industry.',
            Icon: LockClosedIcon
        }
    ]}
/>

skattedosan.se/history: commit 1396f74 (2026-08-18)

Big possibilities in small size

The technical aspect is expanding significantly, featuring Control Units storing over 32 million records with memory capacities ranging from 8GB to 128GB

Multiple devices support

Skattedosan is seamlessly adaptable and compatible with various cash solutions, requiring no external power source.

High capacity

Skattedosan boasts unmatched capabilities, storing 32+ million receipts, accommodating up to 1000 new organization numbers/cash pages, and supporting 9000 users. With a robust design, it withstands temperatures as low as -20°C, making it resilient in challenging environments.

Certified

Ensuring safety, Skattedosan is double-certified, meeting the regulations of the Swedish Tax Agency and earning certification from Kassacertifiering.se, distinguishing it in the industry.

MDX of this sample

import DatabaseIcon from 'astro-heroicons/outline/CircleStack.astro';
import TemplateIcon from 'astro-heroicons/outline/RectangleGroup.astro';
import LockClosedIcon from 'astro-heroicons/outline/LockClosed.astro';

<Offsets
    title="Big possibilities in small size"
    subtitle="The technical aspect is expanding significantly, featuring Control Units storing over 32 million records with memory capacities ranging from 8GB to 128GB"
    features={[
        {
            name: 'Multiple devices support',
            description: 'Skattedosan is seamlessly adaptable and compatible with various cash solutions, requiring no external power source.',
            Icon: DatabaseIcon
        },
        {
            name: 'High capacity',
            description: 'Skattedosan boasts unmatched capabilities, storing 32+ million receipts, accommodating up to 1000 new organization numbers/cash pages, and supporting 9000 users. With a robust design, it withstands temperatures as low as -20°C, making it resilient in challenging environments.',
            Icon: TemplateIcon
        },
        {
            name: 'Certified',
            description: 'Ensuring safety, Skattedosan is double-certified, meeting the regulations of the Swedish Tax Agency and earning certification from Kassacertifiering.se, distinguishing it in the industry.',
            Icon: LockClosedIcon
        }
    ]}
/>

Props

Name	Type	Required	Default	Description
features	Feature[]	yes
title	string	yes
subtitle	string

Source apps/www/src/components/Offsets.astro @ gitt.one

---
import GlobeAlt from 'astro-heroicons/outline/GlobeAlt.astro';

interface Feature {
  name: string;
  description: string;
  Icon?: any;
}

interface Props {
  features: Feature[];
  title: string;
  subtitle?: string;
}

const { features, title, subtitle } = Astro.props;
---

<section class="relative mt-20 overflow-hidden bg-gray-50">
  <div class="relative mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
    <svg
      class="absolute left-full top-0 lg:left-auto lg:right-[82rem] lg:top-16"
      width={404}
      height={784}
      fill="none"
      viewBox="0 0 404 784"
      aria-hidden="true"
    >
      <defs>
        <pattern
          id="offsets-dots-pattern"
          x={0}
          y={0}
          width={20}
          height={20}
          patternUnits="userSpaceOnUse"
        >
          <rect x={0} y={0} width={4} height={4} class="text-gray-200" fill="currentColor"></rect>
        </pattern>
      </defs>
      <rect width={404} height={784} fill="url(#offsets-dots-pattern)"></rect>
    </svg>

    <div class="relative lg:grid lg:grid-cols-2 lg:gap-x-24">
      <div class="lg:col-span-1">
        <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
          {title}
        </h2>
        {
          subtitle && (
            <p class="mx-auto mt-3 max-w-md text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl">
              {subtitle}
            </p>
          )
        }
      </div>
      {
        features.length > 0 && (
          <div class="mt-10 space-y-10 sm:grid sm:gap-x-8 sm:gap-y-10 sm:space-y-0 lg:mt-0">
            {features.map(({ name, description, Icon = GlobeAlt }) => (
              <div class="grid grid-flow-col gap-x-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-md bg-primary-500 p-3 text-white">
                  <Icon class="h-6 w-6" aria-hidden="true" />
                </div>
                <div>
                  <p class="text-lg font-medium leading-6 text-gray-900">{name}</p>
                  <p class="mt-2 text-base text-gray-500">{description}</p>
                </div>
              </div>
            ))}
          </div>
        )
      }
    </div>
  </div>
</section>

Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.