Feature

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

Feature — one item of <Features>. Icon is an astro-heroicons component imported in the article; image is a file name from images/.

Used by

posexpert.se / × 6

Live sites: posexpert.se.

Samples 1

posexpert.se/shown inside <Features>

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	Required	Description
title	string	yes
description	string
Icon	any
image	string
number	string \| number		ordinal badge (steps) shown instead of an icon
linkText	string
href	string

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

---
/**
 * Feature — one item of <Features>. Icon is an astro-heroicons component
 * imported in the article; image is a file name from images/.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
import Button from './_Button.astro';

interface Props {
  title: string;
  description?: string;
  Icon?: any;
  image?: string;
  /** ordinal badge (steps) shown instead of an icon */
  number?: string | number;
  linkText?: string;
  href?: string;
}

const { title, description, Icon, image, number, linkText, href } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

<li class="flow-root">
  <div class="h-full rounded-lg px-6 pb-8 pt-8 [ul[data-variant=cards]_&]:bg-gray-50 [ul[data-variant=cards]_&]:text-gray-900 [ul[data-variant=cards]_&]:shadow-sm [ul[data-variant=plain]_&]:px-0 [ul[data-variant=plain]_&]:pt-0">
    {
      (Icon || number !== undefined) && (
        <span class="inline-flex h-12 w-12 items-center justify-center rounded-md bg-primary-700 text-xl font-bold text-white shadow-lg">
          {Icon ? <Icon class="h-6 w-6" aria-hidden="true" /> : number}
        </span>
      )
    }
    {img && <Image src={img} alt="" widths={[400, 840]} class="w-full rounded-md" />}
    <h3 class="mt-6 text-lg font-medium tracking-tight [ul[data-variant=cards]_&]:text-primary-800">{title}</h3>
    {description && <p class="mt-3 text-base [ul[data-variant=cards]_&]:text-gray-500">{description}</p>}
    <slot />
    {linkText && href && <p class="mt-6"><Button href={href} kind="link">{linkText}</Button></p>}
  </div>
</li>

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.