Skip to content

Instantly share code, notes, and snippets.

@veloxy

veloxy/alert-extra.html.twig

Last active October 17, 2025 09:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save veloxy/b44244e1eb646768bb45af26ee8d7604 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save veloxy/b44244e1eb646768bb45af26ee8d7604 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
alert-extra.html.twig
<twig:Alert type="info" icon="false">
Drag items between columns to show/hide relevant data in the list or change their order
<twig:block name="extra">
<ul class="mt-1.5 list-inside list-disc">
<li>At least 10 characters (and up to 100 characters)</li>
<li>At least one lowercase character</li>
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
</ul>
</twig:block>
</twig:Alert>
Raw
alerts.html.twig
<twig:Alert type="info">
Drag items between columns to show/hide relevant data in the list or change their order
</twig:Alert>
<twig:Alert type="danger">
Drag items between columns to show/hide relevant data in the list or change their order
</twig:Alert>
<twig:Alert type="warning">
Drag items between columns to show/hide relevant data in the list or change their order
</twig:Alert>
<twig:Alert type="default">
Drag items between columns to show/hide relevant data in the list or change their order
</twig:Alert>
<twig:Alert type="success">
Drag items between columns to show/hide relevant data in the list or change their order
</twig:Alert>
Raw
avatar-tooltips.html.twig
<div class="flex flex-col items-center">
<twig:Heading size="4">Initials</twig:Heading>
<twig:Avatar tooltip="Hello world!" initials="KV" />
</div>
<div class="flex flex-col items-center">
<twig:Heading size="4" class="mt-5">Initials based on name</twig:Heading>
<twig:Avatar name="Kevin Vandenborne" />
</div>
<div class="flex flex-col items-center">
<twig:Heading size="4" class="mt-5">Fallback placeholder</twig:Heading>
<twig:Avatar tooltip="We did it!" />
</div>
<div class="flex flex-col items-center">
<twig:Heading size="4" class="mt-5">Image</twig:Heading>
<twig:Avatar name="Kevin Vandenborne" src="https://placehold.co/100"/>
</div>
Raw
avatar.html.twig
<div class="flex flex-col items-center">
<twig:Heading size="4">Initials</twig:Heading>
<twig:Avatar :tooltip="false" initials="KV" />
</div>
<div class="flex flex-col items-center">
<twig:Heading size="4">Initials based on name</twig:Heading>
<twig:Avatar :tooltip="false" name="Kevin Vandenborne" />
</div>
<div class="flex flex-col items-center">
<twig:Heading size="4">Fallback placeholder</twig:Heading>
<twig:Avatar :tooltip="false" />
</div>
<div class="flex flex-col items-center">
<twig:Heading size="4">Image</twig:Heading>
<twig:Avatar :tooltip="false" src="https://placehold.co/100"/>
</div>
Raw
button-colors.html.twig
<twig:Button:Link href="#" color="default">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Default
</twig:Button:Link>
<twig:Button:Link href="#" color="primary">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Primary
</twig:Button:Link>
<twig:Button:Link href="#" color="danger">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Danger
</twig:Button:Link>
<twig:Button:Link href="#" color="warning">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Warning
</twig:Button:Link>
<twig:Button:Link href="#" color="info">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Info
</twig:Button:Link>
<twig:Button:Link href="#" color="success">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Success
</twig:Button:Link>
Raw
button-grouped-buttons-default.html.twig
<twig:Button:Group class="mb-4">
<twig:Button:Grouped:Button href="#" position="first">
Item 1
</twig:Button:Grouped:Button>
<twig:Button:Grouped:Button href="#">
Item 2
</twig:Button:Grouped:Button>
<twig:Button:Grouped:Button href="#">
Item 3
</twig:Button:Grouped:Button>
<twig:Button:Grouped:Button href="#" position="last">
Item 4
</twig:Button:Grouped:Button>
</twig:Button:Group>
Raw
button-grouped-buttons-icons.html.twig
<twig:Button:Group rounded="full">
<twig:Button:Grouped:Button href="#" position="first" color="success" rounded="full">
<twig:Button:Icon name="fa7-regular:thumbs-up" class="m-0" />
</twig:Button:Grouped:Button>
<twig:Button:Grouped:Button href="#" position="last" color="danger" rounded="full">
<twig:Button:Icon name="fa7-regular:thumbs-down" class="m-0" />
</twig:Button:Grouped:Button>
</twig:Button:Group>
Raw
button-grouped-buttons.html.twig
<twig:Button:Group class="mb-4">
<twig:Button:Grouped:Button href="#" color="primary" position="first">
<twig:Button:Icon name="fa7-regular:comment-alt" />
First
</twig:Button:Grouped:Button>
<twig:Button:Grouped:Button href="#" color="primary">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Middle
</twig:Button:Grouped:Button>
<twig:Button:Grouped:Button href="#" color="primary" position="last">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Last
</twig:Button:Grouped:Button>
</twig:Button:Group>
Raw
button-roundings.html.twig
<twig:Button:Link href="#" color="primary">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Default
</twig:Button:Link>
<twig:Button:Link href="#" color="primary" rounded="sm">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Small
</twig:Button:Link>
<twig:Button:Link href="#" color="primary" rounded="md">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Medium
</twig:Button:Link>
<twig:Button:Link href="#" color="primary" rounded="lg">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Large
</twig:Button:Link>
<twig:Button:Link href="#" color="primary" rounded="full">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Full
</twig:Button:Link>
Raw
button-sizes.html.twig
<twig:Button:Link href="#" color="primary">
<twig:Button:Icon name="fa7-regular:comment-alt" />
Default
</twig:Button:Link>
<twig:Button:Link href="#" color="primary" size="sm">
<twig:Button:Icon name="fa7-regular:comment-alt" size="sm" />
Small
</twig:Button:Link>
<twig:Button:Link href="#" color="primary" size="md">
<twig:Button:Icon name="fa7-regular:comment-alt" size="md" />
Medium
</twig:Button:Link>
<twig:Button:Link href="#" color="primary" size="lg">
<twig:Button:Icon name="fa7-regular:comment-alt" size="lg" />
Large
</twig:Button:Link>
Raw
button-type-submit.html.twig
<twig:Button color="primary" type="submit">
{{ 'buttons.apply.label' | trans }}
</twig:Button>
<twig:Button type="submit">
{{ 'buttons.apply.label' | trans }}
</twig:Button>
<twig:Button type="submit">
<twig:Button:Icon name="fa7-regular:comment-alt" />
{{ 'buttons.apply.label' | trans }}
</twig:Button>
<twig:Button type="submit">
{{ 'buttons.apply.label' | trans }}
<twig:Button:Icon name="fa7-regular:comment-alt" placement="right" />
</twig:Button>
Raw
card-rounded-lg.html.twig
<twig:Card rounded="lg">
<twig:Heading size="3" level="5">Card rounded lg</twig:Heading>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</twig:Card>
Raw
card-rounded-md.html.twig
<twig:Card>
<twig:Heading size="3" level="5">Card rounded md (default)</twig:Heading>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</twig:Card>
Raw
card-rounded-none.html.twig
<twig:Card rounded="none">
<twig:Heading size="3" level="5">Card rounded none</twig:Heading>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</twig:Card>
Raw
card-rounded-sm.html.twig
<twig:Card rounded="sm">
<twig:Heading size="3" level="5">Card rounded sm</twig:Heading>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</twig:Card>
Raw
checkbox-group-border.html.twig
<twig:Form:Checkbox:Group class="mt-4 flex-wrap items-stretch" type="horizontal">
<twig:Form:Checkbox id="bordered-1" bordered name="shipping" required="required" help="You will not be charged yet for this option.">
Free shipping
</twig:Form:Checkbox>
<twig:Form:Checkbox id="bordered-2" bordered name="shipping" required="required" help="You will not be charged yet for this option.">
Free shipping
</twig:Form:Checkbox>
<twig:Form:Checkbox id="bordered-3" bordered name="shipping" required="required">
Free shipping
</twig:Form:Checkbox>
<twig:Form:Checkbox id="bordered-4" bordered name="shipping" required="required" disabled help="You will not be charged yet for this option.">
Free shipping
</twig:Form:Checkbox>
</twig:Form:Checkbox:Group>
Raw
checkbox-help.html.twig
<twig:Form:Checkbox id="shipping" name="shipping" class="mt-4" required="required" help="You will not be charged yet for this option.">
Free shipping
</twig:Form:Checkbox>
Raw
checkbox.html.twig
<twig:Form:Checkbox:Group>
<twig:Form:Checkbox id="checkbox-1" name="checkbox-group">
Option 1
</twig:Form:Checkbox>
<twig:Form:Checkbox id="checkbox-2" name="checkbox-group" checked="checked">
Option 2
</twig:Form:Checkbox>
<twig:Form:Checkbox id="checkbox-3" name="checkbox-group" disabled="disabled">
Option 3 (disabled)
</twig:Form:Checkbox>
</twig:Form:Checkbox:Group>
<twig:Form:Checkbox:Group class="mt-4">
<twig:Form:Checkbox id="checkbox-other-group-1" name="checkbox-other-group">
Option 1
</twig:Form:Checkbox>
<twig:Form:Checkbox id="checkbox-other-group-2" name="checkbox-other-group" disabled="disabled" checked>
Option 2 (checked & disabled)
</twig:Form:Checkbox>
</twig:Form:Checkbox:Group>
Raw
comments.html.twig
<twig:Comments>
<twig:Comments:Comment avatarSource="https://placehold.co/100/FF0000/FFF">
<twig:Comments:Title>This is a title</twig:Comments:Title>
<twig:Comments:Time date="2025-07-01 11:44" username="Michiel Vanbilsen"/>
<twig:Comments:Message>
<p>This comment has a custom title and message using the block system.</p>
</twig:Comments:Message>
</twig:Comments:Comment>
<twig:Comments:Comment avatarSource="https://placehold.co/100/FF0000/FFF">
<twig:Comments:Title>This is a title</twig:Comments:Title>
<twig:Comments:Time date="2025-07-01 11:44" username="Michiel Vanbilsen"/>
<twig:Comments:Message>
<p>This comment has a custom title and message using the block system.</p>
</twig:Comments:Message>
<twig:block name="reactions">
<twig:Comments:Reaction avatarSource="https://placehold.co/100/00FF00/FFF">
<twig:Comments:Time date="2025-07-01 11:44" username="Michiel Vanbilsen"/>
<twig:Comments:Message>
<p>This comment has a custom title and message using the block system.</p>
</twig:Comments:Message>
</twig:Comments:Reaction>
</twig:block>
</twig:Comments:Comment>
<twig:Comments:Comment avatarSource="https://placehold.co/100/FF0000/FFF">
<twig:Comments:Title>This is a title</twig:Comments:Title>
<twig:Comments:Time date="2025-07-01 11:44" username="Michiel Vanbilsen"/>
<twig:Comments:Message>
<p>This comment has a custom title and message using the block system.</p>
</twig:Comments:Message>
</twig:Comments:Comment>
</twig:Comments>
Raw
datepicker.html.twig
<twig:Form:Label for="datepicker-1" class="mb-4 block">
Default date picker
<twig:Form:Datepicker id="datepicker-1" class="mt-2" />
</twig:Form:Label>
<twig:Form:Label for="datepicker-2" class="mb-4 block">
Range picker with custom placeholders
<twig:Form:Datepicker id="datepicker-2" class="mt-2" placeholder="Dit is een custom placeholder" />
</twig:Form:Label>
Raw
daterangepicker.html.twig
<twig:Form:Label for="datepicker-3" class="mb-4 block">
Default date range picker
<twig:Form:DateRange id="datepicker-3" class="mt-2"></twig:Form:DateRange>
</twig:Form:Label>
<twig:Form:Label for="datepicker-4" class="mb-4 block">
Range picker with custom placeholders
<twig:Form:DateRange id="datepicker-4" start:placeholder="Custom start placeholder" end:placeholder="Custom end placeholder" class="mt-2" />
</twig:Form:Label>
<twig:Form:Label for="datepicker-5" class="mb-4 block">
Range picker prefilled
<twig:Form:DateRange id="datepicker-5"
start:placeholder="Custom start placeholder"
start:input:value="01/01/2025"
end:placeholder="Custom end placeholder"
end:input:value="01/02/2025"
class="mt-2"
/>
</twig:Form:Label>
Raw
headings-levels.html.twig
<twig:Heading level="2">Heading size 1 (h2)</twig:Heading>
<twig:Heading size="3" level="1">Heading size 3 (h1)</twig:Heading>
Raw
headings.html.twig
<twig:Heading>Heading 1 (h1)</twig:Heading>
<twig:Heading size="2">Heading 2 (h2)</twig:Heading>
<twig:Heading size="3">Heading 3 (h3)</twig:Heading>
<twig:Heading size="4">Heading 4 (h4)</twig:Heading>
<twig:Heading size="5">Heading 5 (h5)</twig:Heading>
<twig:Heading size="6">Heading 6 (h6)</twig:Heading>
Raw
list-group.html.twig
<twig:ListGroup>
<twig:ListGroup:Item>Default</twig:ListGroup:Item>
<twig:ListGroup:Item type="button">Button</twig:ListGroup:Item>
<twig:ListGroup:Item type="link" href="{{ path('app_suppliers_list') }}">Link</twig:ListGroup:Item>
</twig:ListGroup>
{# button variants #}
<twig:ListGroup>
<twig:ListGroup:Item color="default">Default</twig:ListGroup:Item>
<twig:ListGroup:Item color="primary">Primary</twig:ListGroup:Item>
<twig:ListGroup:Item color="info" type="button">Info</twig:ListGroup:Item>
<twig:ListGroup:Item color="warning" type="link" href="{{ path('app_suppliers_list') }}">Warning</twig:ListGroup:Item>
<twig:ListGroup:Item color="danger" type="link" href="{{ path('app_suppliers_list') }}">Danger</twig:ListGroup:Item>
<twig:ListGroup:Item color="success" type="link" href="{{ path('app_suppliers_list') }}">Success</twig:ListGroup:Item>
</twig:ListGroup>
{# icons #}
<twig:ListGroup>
<twig:ListGroup:Item>
<twig:ListGroup:Item:Icon name="pencil-regular-full" /> Edit
</twig:ListGroup:Item>
<twig:ListGroup:Item>
<twig:ListGroup:Item:Icon name="font-regular-full" /> Rename
</twig:ListGroup:Item>
<twig:ListGroup:Item class="text-form-danger">
<twig:ListGroup:Item:Icon name="trash-can-regular-full" /> Delete
</twig:ListGroup:Item>
</twig:ListGroup>
Raw
pagination.html.twig
<twig:Pagination>
<twig:Pagination:First/>
<twig:Pagination:Previous/>
<twig:Pagination:Item>1</twig:Pagination:Item>
<twig:Pagination:Item :current="true">2</twig:Pagination:Item>
<twig:Pagination:Item>3</twig:Pagination:Item>
<twig:Pagination:Next/>
<twig:Pagination:Last/>
</twig:Pagination>
<twig:Pagination>
<twig:Pagination:First :disabled="true"/>
<twig:Pagination:Previous :disabled="true"/>
<twig:Pagination:Item :current="true">1</twig:Pagination:Item>
<twig:Pagination:Item>2</twig:Pagination:Item>
<twig:Pagination:Item>3</twig:Pagination:Item>
<twig:Pagination:Next />
<twig:Pagination:Last />
</twig:Pagination>
<twig:Pagination class="mt-5">
<twig:Pagination:First/>
<twig:Pagination:Previous/>
<twig:Pagination:Item>1</twig:Pagination:Item>
<twig:Pagination:Item>2</twig:Pagination:Item>
<twig:Pagination:Item :current="true">3</twig:Pagination:Item>
<twig:Pagination:Next :disabled="true"/>
<twig:Pagination:Last :disabled="true"/>
</twig:Pagination>
Raw
radio.html.twig
<twig:Form:Radio:Group>
<twig:Form:Radio id="radio-1" name="radio-group">
Option 1
</twig:Form:Radio>
<twig:Form:Radio id="radio-2" name="radio-group" checked="checked">
Option 2
</twig:Form:Radio>
<twig:Form:Radio id="radio-3" name="radio-group" disabled="disabled">
Option 3 (disabled)
</twig:Form:Radio>
</twig:Form:Radio:Group>
<twig:Form:Radio:Group class="mt-4">
<twig:Form:Radio id="radio-other-group-1" name="radio-other-group">
Option 1
</twig:Form:Radio>
<twig:Form:Radio id="radio-other-group-2" name="radio-other-group" disabled="disabled" checked>
Option 2 (checked & disabled)
</twig:Form:Radio>
</twig:Form:Radio:Group>
Raw
select-multiple.html.twig
<twig:Form:Select id="select-3" multiple="true" label="Select an option">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Option>United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select>
Raw
select-rows.html.twig
<twig:Form:Select id="select-4" rows="3" label="Select an option">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Option>United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select>
Raw
select-variants.html.twig
<twig:Form:Select id="select-6" size="small" label="Small label">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Option>United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select>
<twig:Form:Select id="select-7" size="default" label="Medium label">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Option>United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select>
<twig:Form:Select id="select-8" size="large" label="Large label">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Option>United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select>
Raw
select.html.twig
<twig:Form:Select id="select-1" label="Select an option">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Option value="United states">United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select>
<twig:Form:Select id="select-2" label="Select an option">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Optgroup label="North America">
<twig:Form:Select:Option>United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
</twig:Form:Select:Optgroup>
<twig:Form:Select:Optgroup label="Europe">
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select:Optgroup>
</twig:Form:Select>
<twig:Form:Select id="select-5" :disabled="true" label="Select an option">
<twig:Form:Select:Option selected>Choose a country</twig:Form:Select:Option>
<twig:Form:Select:Option>United States</twig:Form:Select:Option>
<twig:Form:Select:Option>Canada</twig:Form:Select:Option>
<twig:Form:Select:Option>France</twig:Form:Select:Option>
<twig:Form:Select:Option>Germany</twig:Form:Select:Option>
</twig:Form:Select>
Raw
tables.html.twig
<twig:Table>
<twig:Table:Head>
<twig:Table:Head:Cell :sortable="true">PRODUCT NAME</twig:Table:Head:Cell>
<twig:Table:Head:Cell>COLOR</twig:Table:Head:Cell>
<twig:Table:Head:Cell>CATEGORY</twig:Table:Head:Cell>
<twig:Table:Head:Cell>PRICE</twig:Table:Head:Cell>
<twig:Table:Head:Cell>ACTION</twig:Table:Head:Cell>
</twig:Table:Head>
<twig:Table:Body>
<twig:Table:Row>
<twig:Table:Cell>Apple Macbook Pro 17"</twig:Table:Cell>
<twig:Table:Cell>Silver</twig:Table:Cell>
<twig:Table:Cell>Laptop</twig:Table:Cell>
<twig:Table:Cell>€2999</twig:Table:Cell>
<twig:Table:Cell class="flex space-x-2 items-center">
<twig:Button>
<twig:Button:Icon name="pencil-regular-full" class="m-0" />
</twig:Button>
<twig:Button color="danger">
<twig:Button:Icon name="trash-can-regular-full" class="m-0" />
</twig:Button>
</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row>
<twig:Table:Cell>Microsoft Surface Pro</twig:Table:Cell>
<twig:Table:Cell>White</twig:Table:Cell>
<twig:Table:Cell>Laptop PC</twig:Table:Cell>
<twig:Table:Cell>€1999</twig:Table:Cell>
<twig:Table:Cell class="flex space-x-2 items-center">
<twig:Button>
<twig:Button:Icon name="pencil-regular-full" class="m-0" />
</twig:Button>
<twig:Button color="danger">
<twig:Button:Icon name="trash-can-regular-full" class="m-0" />
</twig:Button>
</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row>
<twig:Table:Cell>Magic Mouse 2</twig:Table:Cell>
<twig:Table:Cell>Black</twig:Table:Cell>
<twig:Table:Cell>Accessories</twig:Table:Cell>
<twig:Table:Cell>€99</twig:Table:Cell>
<twig:Table:Cell class="flex space-x-2 items-center">
<twig:Button>
<twig:Button:Icon name="pencil-regular-full" class="m-0" />
</twig:Button>
<twig:Button color="danger">
<twig:Button:Icon name="trash-can-regular-full" class="m-0" />
</twig:Button>
</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Body>
</twig:Table>
Raw
tabs.html.twig
<twig:Tabs class="mb-3">
<twig:Tabs:Tab :active="true" href="#">
Contracts
</twig:Tabs:Tab>
<twig:Tabs:Tab href="#">
Notes
</twig:Tabs:Tab>
<twig:Tabs:Tab href="#" badge="99+">
Suppliers
</twig:Tabs:Tab>
<twig:Tabs:Tab href="#" icon="fa7-regular:comment-alt">
Comments
</twig:Tabs:Tab>
<twig:Tabs:Tab href="#" indicator="danger">
Audit
</twig:Tabs:Tab>
</twig:Tabs>
Raw
timeline.html.twig
<twig:Timeline>
<twig:Timeline:Item avatarSource="https://placehold.co/100/FF0000/FFF">
<twig:Timeline:Item:Time date="2025-07-01 11:44" username="Michiel Vanbilsen"/>
<twig:Timeline:Item:Content>
<ul>
<li>New attachment: Offerte: 60m RW</li>
</ul>
</twig:Timeline:Item:Content>
</twig:Timeline:Item>
<twig:Timeline:Item avatarSource="https://placehold.co/100/FF0000/FFF">
<twig:Timeline:Item:Time date="2025-07-01 11:44" username="Michiel Vanbilsen"/>
<twig:Timeline:Item:Content>
<ul>
<li>Change email: info@avantmachinery.be</li>
<li>Change phonenumber: 0123456789</li>
<li>Change VAT: BE1234567890</li>
</ul>
</twig:Timeline:Item:Content>
</twig:Timeline:Item>
</twig:Timeline>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment