Status-item examples

Show params

Params

params:
- name: id
  type: string
  required: true
  description: The id of the item.
- name: title
  type: object
  required: false
  description: This is the title
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item title.
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
- name: errorId
  type: string
  required: false
  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: items
  type: array
  required: false
  description: Description list items
  params:
  - name: term
    type: object
    required: true
    description: term in dt.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within each dt item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within each dt item. If `html` is provided, the `text` argument will be ignored.
    - name: classes
      type: string
      required: false
      description: Classes to add to the dt.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the dt.
  - name: definition
    type: object
    required: true
    description: definition in dd.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within each dd item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within each dd item. If `html` is provided, the `text` argument will be ignored.
    - name: classes
      type: string
      required: false
      description: Classes to add to the dd.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the dd.
  - name: classes
    type: string
    required: false
    description: Classes to add to a div container that contain the dt/dd pair.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
- name: status
  type: object
  required: false
  description: Options for the status component.
- name: classes
  type: string
  required: false
  description: Classes to add to the status container div tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the container div tag.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.

default

Title

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "default",
  "title": {
    "text": "Title"
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Action</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Action</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="default">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Title
    </p>

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Action</button>
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

default only items

term
definition
term
definition
term
definition

Status

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "only-items",
  "items": [
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      }
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      }
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      }
    }
  ],
  "status": {
    "text": "Status",
    "icon": {
      "type": "success"
    }
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Action</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Action</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="only-items">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
        
        <dl>
            <div class="flex lg-flex-wrap">
    <dt class="w-1/2 my-sm">
      term
    </dt>
    <dd class="w-1/2 my-sm font-semibold">
      definition
    </dd>
  </div>
  <div class="flex lg-flex-wrap">
    <dt class="w-1/2 my-sm">
      term
    </dt>
    <dd class="w-1/2 my-sm font-semibold">
      definition
    </dd>
  </div>
  <div class="flex lg-flex-wrap">
    <dt class="w-1/2 my-sm">
      term
    </dt>
    <dd class="w-1/2 my-sm font-semibold">
      definition
    </dd>
  </div>

        </dl>
      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Action</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div >
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Status
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with title html

Autorización para la consulta de datos de las personas de la unidad familiar. (Documento condicionado)

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-title-html",
  "title": {
    "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class=\"text-neutral-dark\">(Documento condicionado)</span>"
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Aportar</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Aportar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-title-html">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Autorización para la consulta de datos de las personas de la unidad familiar. <span class="text-neutral-dark">(Documento condicionado)</span>
    </p>

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Aportar</button>
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with hint

Personas de la unidad familiar

2 personas añadidas

Aportado

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint",
  "title": {
    "text": "Personas de la unidad familiar"
  },
  "hint": {
    "text": "2 personas añadidas"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Modificar</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-hint">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Personas de la unidad familiar
    </p>
    <!-- hint -->
  <p id="with-hint-hint" class="block text-neutral-dark">
    2 personas añadidas
  </p>
  <!-- /hint -->

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div >
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Aportado
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with hint html

Autorización para la consulta de datos de las personas de la unidad familiar

Descargar modelo

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint-html",
  "title": {
    "text": "Autorización para la consulta de datos de las personas de la unidad familiar"
  },
  "hint": {
    "html": "<a href=\"#\" class=\"c-link\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"inline-block self-center w-4 h-4 mr-sm no-underline\" role=\"img\" aria-hidden=\"true\"><path d=\"M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z\" fill=\"currentColor\"/></svg>Descargar modelo</a>"
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Aportar</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Aportar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-hint-html">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Autorización para la consulta de datos de las personas de la unidad familiar
    </p>
    <!-- hint -->
  <p id="with-hint-html-hint" class="block text-neutral-dark">
    <a href="#" class="c-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block self-center w-4 h-4 mr-sm no-underline" role="img" aria-hidden="true"><path d="M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z" fill="currentColor"/></svg>Descargar modelo</a>
  </p>
  <!-- /hint -->

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Aportar</button>
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with status simple

Datos adicionales del solicitante

Iniciado

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-simple",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Iniciado"
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Rellenar</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Rellenar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-status-simple">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Datos adicionales del solicitante
    </p>

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Rellenar</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div >
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Iniciado
    </span>
    <span class="inline-block ml-sm">
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with status success

Datos adicionales del solicitante

Aportado

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-success",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Modificar</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-status-success">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Datos adicionales del solicitante
    </p>

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div >
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Aportado
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with status alert

Datos adicionales del solicitante

Error: Es necesario aportar este documento para enviar el trámite

Incompleto

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-alert",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Es necesario aportar este documento para enviar el trámite",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    },
    "classes": "text-alert-base"
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Modificar</button>",
  "classes": "border-l-4 border-alert-base"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-status-alert" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Datos adicionales del solicitante
    </p>
    <!-- error-message -->
  <p id="with-status-alert-error" class="block font-semibold text-alert-base my-sm text-alert-base">
  <span class="sr-only">Error:</span> Es necesario aportar este documento para enviar el trámite
  </p>
  <!-- /error-message -->

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div class="text-alert-base">
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Incompleto
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with status loading

Datos adicionales del solicitante

Subiendo (20%)

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-loading",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Subiendo (20%)",
    "icon": {
      "type": "loading"
    }
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Modificar</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-status-loading">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Datos adicionales del solicitante
    </p>

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div >
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Subiendo (20%)
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" focusable="false"><path d="M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z" fill="currentColor"/><path d="M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with status error

Datos adicionales del solicitante

Error: Se ha producido un error al subir el archivo

Error

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-error",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Se ha producido un error al subir el archivo",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Error",
    "icon": {
      "type": "error"
    },
    "classes": "text-alert-base"
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Ver</button>",
  "classes": "border-l-4 border-alert-base"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Ver</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-status-error" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
            <p class="my-sm">
     Datos adicionales del solicitante
    </p>
    <!-- error-message -->
  <p id="with-status-error-error" class="block font-semibold text-alert-base my-sm text-alert-base">
  <span class="sr-only">Error:</span> Se ha producido un error al subir el archivo
  </p>
  <!-- /error-message -->

      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Ver</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div class="text-alert-base">
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Error
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z" fill="currentColor"/><path d="M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

with html in definition

Acreditación
Mediante archivo adjunto Modelo de solicitud (PDF, 200Kb)

Completo

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-html-in-definition",
  "items": [
    {
      "term": {
        "text": "Acreditación"
      },
      "definition": {
        "html": "Mediante archivo adjunto <a href=\"#\" class=\"c-link inline-block\">Modelo de solicitud (PDF, 200Kb)</a>"
      }
    }
  ],
  "status": {
    "text": "Completo",
    "icon": {
      "type": "success"
    }
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Modificar</button>"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="with-html-in-definition">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
        
        <dl>
            <div class="flex lg-flex-wrap">
    <dt class="w-1/2 my-sm">
      Acreditación
    </dt>
    <dd class="w-1/2 my-sm font-semibold">
      Mediante archivo adjunto <a href="#" class="c-link inline-block">Modelo de solicitud (PDF, 200Kb)</a>
    </dd>
  </div>

        </dl>
      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div >
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Completo
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->

incompleto

Nombre
Ana
Apellidos
Pérez Escribano
Número de identificación
72882918B

Incompleto

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "incompleto",
  "items": [
    {
      "term": {
        "text": "Nombre"
      },
      "definition": {
        "text": "Ana"
      }
    },
    {
      "term": {
        "text": "Apellidos"
      },
      "definition": {
        "text": "Pérez Escribano"
      }
    },
    {
      "term": {
        "text": "Número de identificación"
      },
      "definition": {
        "text": "72882918B"
      }
    }
  ],
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    }
  },
  "caller": "<button class=\"c-button c-button--transparent\" data-module=\"c-button\">Rellenar</button>",
  "classes": "border-l-4 border-alert-base"
})  %}
    <button class="c-button c-button--transparent" data-module="c-button">Rellenar</button>
{% endcall %}

Markup

<!-- status-item -->
<div id="incompleto" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
      <div class="lg:w-2/3">
        
        <dl>
            <div class="flex lg-flex-wrap">
    <dt class="w-1/2 my-sm">
      Nombre
    </dt>
    <dd class="w-1/2 my-sm font-semibold">
      Ana
    </dd>
  </div>
  <div class="flex lg-flex-wrap">
    <dt class="w-1/2 my-sm">
      Apellidos
    </dt>
    <dd class="w-1/2 my-sm font-semibold">
      Pérez Escribano
    </dd>
  </div>
  <div class="flex lg-flex-wrap">
    <dt class="w-1/2 my-sm">
      Número de identificación
    </dt>
    <dd class="w-1/2 my-sm font-semibold">
      72882918B
    </dd>
  </div>

        </dl>
      </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
          <button class="c-button c-button--transparent" data-module="c-button">Rellenar</button>
        </div>
        <div class="mb-base lg:mb-0 ml-base py-sm">
          <!-- status -->
<div >
  <p class="inline-flex items-center">
    <span class="inline-block font-bold uppercase">
      Incompleto
    </span>
    <span class="inline-block ml-sm">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
    </span>
  </p>
</div>
<!-- /status -->
        </div>
    </div>
  </div>
</div>
<!-- /status-item -->