---
title: "Steps"
description: "Step-by-step guide component with variable steps and arrow design."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig/components/block-steps"
---

<twig:block-steps
    class="my-4"
    :steps="[
        {
            icon: 'fa-solid fa-list',
            title: 'Test Set',
            content: 'Standard DTE documents requested by the <a href=\'https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\' target=\'_blank\'>SII</a> are sent for validation.'
        },
        {
            icon: 'fa-solid fa-file-lines',
            title: 'Simulation',
            content: 'Real DTE examples that the company will issue in production are sent to the SII.'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Exchange',
            content: 'XML files associated with the response to a DTE exchange are sent to the SII.'
        },
        {
            icon: 'fa-solid fa-file-pdf',
            title: 'PDF Samples',
            content: 'PDFs of all DTE documents from the test set and simulation are sent to the SII. <a href=\'#\' class=\'btn btn-primary\'>Link</a>'
        }
    ]"
    arrowType="straight"
/>

<twig:block-steps
    class="my-4"
    :steps="[
        {
            icon: 'fa-solid fa-list',
            title: 'Test Set',
            content: 'Standard DTE documents requested by the <a href=\'https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\' target=\'_blank\'>SII</a> are sent for validation.'
        },
        {
            icon: 'fa-solid fa-file-lines',
            title: 'Simulation',
            content: 'Real DTE examples that the company will issue in production are sent to the SII.'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Exchange',
            content: 'XML files associated with the response to a DTE exchange are sent to the SII.'
        },
        {
            icon: 'fa-solid fa-file-pdf',
            title: 'PDF Samples',
            content: 'PDFs of all DTE documents from the test set and simulation are sent to the SII.'
        }
    ]"
/>

<twig:block-steps
    class="my-4"
    :steps="[
        {
            icon: 'fa-solid fa-list',
            title: 'Test Set',
            content: 'Standard DTE documents requested by the <a href=\'https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\' target=\'_blank\'>SII</a> are sent for validation.'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Exchange',
            content: 'XML files associated with the response to a DTE exchange are sent to the SII.'
        },
        {
            icon: 'fa-solid fa-file-pdf',
            title: 'PDF Samples',
            content: 'PDFs of all DTE documents from the test set and simulation are sent to the SII.'
        }
    ]"
    arrowType="straight"
/>

<twig:block-steps
    class="my-4"
    :steps="[
        {
            icon: 'fa-solid fa-list',
            title: 'Test Set',
            content: 'Standard DTE documents requested by the <a href=\'https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\' target=\'_blank\'>SII</a> are sent for validation.'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Exchange',
            content: 'XML files associated with the response to a DTE exchange are sent to the SII.'
        },
        {
            icon: 'fa-solid fa-file-pdf',
            title: 'PDF Samples',
            content: 'PDFs of all DTE documents from the test set and simulation are sent to the SII.'
        }
    ]"
/>



---
Last updated on 09/09/2026