Features

apps/www/src/sections/Features.astro · 31 lines · group Features & lists

Features — a grid of <Feature> cards: services, benefits, steps, USP. variant="cards" white cards on a tinted/dark band, icon in a brand square variant="plain" no card, icon + text (dense benefit lists) columns 2|3|4; overlap pulls the grid over a cover Hero.

Used by

posexpert.se / × 2

Live sites: posexpert.se.

Samples 1

posexpert.se/

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.
Contact us
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.
Contact us
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
Contact us

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

<Features overlap title="Services">
  <Feature
    title="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}
    linkText="Contact us"
    href="/#contacts"
  />
  <Feature
    title="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}
    linkText="Contact us"
    href="/#contacts"
  />
  <Feature
    title="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}
    linkText="Contact us"
    href="/#contacts"
  />
</Features>

Props

Name	Type	Default
id	string
title	string
description	string
columns	2 \| 3 \| 4	3
variant	'cards' \| 'plain'	'cards'
theme	Theme
overlap	boolean	false

Source apps/www/src/sections/Features.astro @ gitt.one

---
/**
 * Features — a grid of <Feature> cards: services, benefits, steps, USP.
 *
 * variant="cards"  white cards on a tinted/dark band, icon in a brand square
 * variant="plain"  no card, icon + text (dense benefit lists)
 * columns 2|3|4; overlap pulls the grid over a cover Hero.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  columns?: 2 | 3 | 4;
  variant?: 'cards' | 'plain';
  theme?: Theme;
  overlap?: boolean;
}

const { id, title, description, columns = 3, variant = 'cards', theme, overlap = false } = Astro.props;
const cols = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-2 lg:grid-cols-3', 4: 'sm:grid-cols-2 lg:grid-cols-4' }[columns];
---

<Section id={id} title={title} description={description} theme={theme ?? (overlap ? 'dark' : 'light')} overlap={overlap} heading={title ? 'center' : 'sr'}>
  <ul class:list={['grid list-none grid-cols-1 gap-8', cols, variant === 'cards' && 'gap-y-16 sm:gap-y-8']} data-variant={variant}>
    <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.