---
type: block
title: Services
description: Service section layouts for agencies, consultancies, and internal platform teams.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro live props={{ name: 'services-1' }}
---
import Services1Block from "@/components/blocks/services-1.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---

<Services1Block
  badge="What we do"
  title="A simple services section for agencies and internal platform teams"
  buttons={[{ label: "View all services", href: "#" }]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Strategy",
      title: "Page strategy",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "/blocks/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Development",
      title: "Section implementation",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "/components/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Design",
      title: "Design system tuning",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "/docs/installation/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Optimization",
      title: "Performance audits",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "/docs/",
    },
  ]}
/>
```

```astro live props={{ name: 'services-2' }}
---
import Services2Block from "@/components/blocks/services-2.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---

<Services2Block
  badge="Our process"
  title="A horizontal layout for when each service needs visual context"
  description="This layout pairs each service with an image, giving clients a clear picture of the deliverable."
  services={[
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Step 01",
      title: "Audit & discovery",
      description:
        "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Step 02",
      title: "Refine & prototype",
      description:
        "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Step 03",
      title: "Ship & iterate",
      description:
        "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
      button: { label: "Learn more", href: "#" },
    },
  ]}
/>
```

```astro live props={{ name: 'services-3' }}
---
import Services3Block from "@/components/blocks/services-3.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---

<Services3Block
  badge="Consulting"
  title="Bold image overlays for when positioning matters"
  description="This style is useful for advisory or studio work where the offer should feel premium and deliberate."
  buttons={[
    { label: "Start a project", href: "#" },
    { label: "View case studies", href: "#" },
  ]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Strategy workshops",
      description:
        "Guide teams through product discovery and service definition with structured facilitation.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Component audits",
      description:
        "Review existing design systems and recommend improvements for consistency and scale.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Section implementation",
      description:
        "Translate designs into production-ready, responsive section layouts.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Launch support",
      description:
        "Dedicated hands-on support for shipping day and the critical first week.",
      button: { label: "Learn more", href: "#" },
    },
  ]}
/>
```

```astro live props={{ name: 'services-4' }}
---
import Services4Block from "@/components/blocks/services-4.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---

<Services4Block
  title="Clean cards when each service speaks for itself"
  description="A minimal approach where the image and title do the heavy lifting."
  buttons={[{ label: "Get started", href: "#" }]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Research",
      description: "Understand the problem space before designing solutions.",
      link: { label: "About research", href: "/docs/" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "System design",
      description: "Architect scalable systems that grow with your team.",
      link: { label: "About system design", href: "/blocks/" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Build",
      description: "Translate refined designs into production-ready code.",
      link: { label: "About build", href: "/components/" },
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Rollout",
      description: "Deploy and support the launch across all environments.",
      link: { label: "About rollout", href: "/docs/installation/" },
    },
  ]}
/>
```

```astro live props={{ name: 'services-5' }}
---
import Services5Block from "@/components/blocks/services-5.astro"
---

<Services5Block
  badge="Specialties"
  title="Icon-based cards for a quick service overview"
  description="Use this layout when the service list is concise and each entry benefits from a visual anchor rather than an image."
  services={[
    {
      icon: "search",
      title: "Documentation systems",
      description:
        "Pair concise cards with a broader framing message. Structure content for discoverability and maintainability.",
      link: { label: "About documentation systems", href: "/docs/" },
    },
    {
      icon: "pencil-ruler",
      title: "Launch pages",
      description:
        "Pair concise cards with a broader framing message. Design high-converting pages that ship on schedule.",
      link: { label: "About launch pages", href: "/blocks/" },
    },
    {
      icon: "code",
      title: "Editorial redesigns",
      description:
        "Pair concise cards with a broader framing message. Modernize editorial layouts without disrupting the content pipeline.",
      link: { label: "About editorial redesigns", href: "/components/" },
    },
    {
      icon: "rocket",
      title: "Platform migration",
      description:
        "Pair concise cards with a broader framing message. Move between platforms without losing content or momentum.",
      link: { label: "About platform migration", href: "/docs/installation/" },
    },
  ]}
/>
```

```astro live props={{ name: 'services-6' }}
---
import Services6Block from "@/components/blocks/services-6.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---

<Services6Block
  badge="Studio work"
  title="Use a side description with overlay cards when the offer should feel premium"
  description="A sticky sidebar provides context while the service cards scroll into view."
  buttons={[
    { label: "Start a project", href: "#" },
    { label: "View work", href: "#" },
  ]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Strategy workshops",
      description:
        "Guide teams through product discovery and service definition.",
      href: "/blocks/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Component audits",
      description:
        "Review existing systems and recommend improvements for scale.",
      href: "/components/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Section implementation",
      description: "Translate designs into production-ready section layouts.",
      href: "/docs/installation/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      title: "Launch support",
      description:
        "Hands-on support for shipping day and the first week after.",
      href: "/docs/",
    },
  ]}
/>
```

```astro live props={{ name: 'services-7' }}
---
import Services7Block from "@/components/blocks/services-7.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---

<Services7Block
  badge="High-touch offer"
  title="A featured layout where the first service takes center stage"
  description="This layout uses a larger featured card alongside smaller cards for a hierarchy-driven grid."
  buttons={[
    { label: "Start conversation", href: "#" },
    { label: "Read reviews", href: "#" },
  ]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Featured",
      title: "Brand strategy & identity",
      description:
        "A comprehensive service that covers positioning, visual identity, and brand guidelines for teams scaling fast.",
      href: "/blocks/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Core",
      title: "Design systems",
      description: "Component libraries and tokens built for production scale.",
      href: "/components/",
    },
    {
      image: { src: PlaceholderImage, alt: "" },
      label: "Core",
      title: "Front-end development",
      description:
        "Production-ready code from responsive layouts to interactions.",
      href: "/docs/installation/",
    },
  ]}
  linkLabel="Learn more"
/>
```

## Installation

```bash
npx shadcn@latest add @fulldev/services-1 @fulldev/services-2 @fulldev/services-3 @fulldev/services-4 @fulldev/services-5 @fulldev/services-6 @fulldev/services-7
```