ServiceSection
apps/www/src/components/ServiceSection.astro · 20 lines · group Features & lists
Used by
- posexpert.se / × 2history: commit d82a01f (2026-08-20)
Samples 1
Services
Fast
We develop solutions with minimal hardware requirements to speed up installation and deployment. Our software systems that can handle a high volume of transactions without slowing down.
Reliable
We offer fast and reliable online and offline functionality with data backup and recovery options, so you can retrieve your critical data in case of system failures.
Secure
We develop solutions that use end-to-end encryption protocols to safeguard transaction data with a firewall and anti-malware protection that can detect and prevent cyber threats
MDX of this sample
import PhoneIcon from 'astro-heroicons/outline/Phone.astro';
import SupportIcon from 'astro-heroicons/outline/Lifebuoy.astro';
import NewspaperIcon from 'astro-heroicons/outline/Newspaper.astro';
<ServiceSection>
<ServiceItem
name="Fast"
description="We develop solutions with minimal hardware requirements to speed up installation and deployment. Our software systems that can handle a high volume of transactions without slowing down."
Icon={PhoneIcon}
buttonText="Contact us"
buttonPath="/#contacts"
/>
<ServiceItem
name="Reliable"
description="We offer fast and reliable online and offline functionality with data backup and recovery options, so you can retrieve your critical data in case of system failures."
Icon={SupportIcon}
buttonText="Contact us"
buttonPath="/#contacts"
/>
<ServiceItem
name="Secure"
description="We develop solutions that use end-to-end encryption protocols to safeguard transaction data with a firewall and anti-malware protection that can detect and prevent cyber threats"
Icon={NewspaperIcon}
buttonText="Contact us"
buttonPath="/#contacts"
/>
</ServiceSection>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | 'Services' |
Source apps/www/src/components/ServiceSection.astro @ gitt.one
---
interface Props {
title?: string;
}
const { title = 'Services' } = Astro.props;
---
<section
class="relative z-10 -mt-32 bg-stone-800 px-4 pb-12 sm:px-6 lg:px-8"
aria-labelledby="service-section"
>
<h2 class="sr-only" id="service-section">{title}</h2>
<ul
class="mx-auto grid max-w-7xl list-none grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-0"
>
<slot />
</ul>
</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.