Skip to content

Instantly share code, notes, and snippets.

@veloxy

veloxy/alert-extra.html.twig

Last active August 29, 2025 13:07
Show Gist options
  • Save veloxy/b44244e1eb646768bb45af26ee8d7604 to your computer and use it in GitHub Desktop.
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
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
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
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment