Skip to content

Commit

Permalink
minor #4444 Fix some typos in html_cva docs (jdreesen)
Browse files Browse the repository at this point in the history
This PR was merged into the 3.x branch.

Discussion
----------

Fix some typos in `html_cva` docs

Commits
-------

151b05b Fix some typos in `html_cva` docs
  • Loading branch information
fabpot committed Nov 8, 2024
2 parents 5b380e5 + 151b05b commit 0ca3815
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions doc/functions/html_cva.rst
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function where you define ``base`` classes that should always be present and the

{# templates/alert.html.twig #}
{% set alert = html_cva(
base='alert ',
base='alert',
variants={
color: {
blue: 'bg-blue',
Expand All @@ -45,13 +45,13 @@ Then use the ``color`` and ``size`` variants to select the needed classes:
{# index.html.twig #}
{{ include('alert.html.twig', {'color': 'blue', 'size': 'md'}) }}
// class="alert bg-red text-lg"
// class="alert bg-red text-md"
{{ include('alert.html.twig', {'color': 'green', 'size': 'sm'}) }}
// class="alert bg-green text-sm"
{{ include('alert.html.twig', {'color': 'red', 'class': 'flex items-center justify-center'}) }}
// class="alert bg-red text-md flex items-center justify-center"
// class="alert bg-red flex items-center justify-center"
CVA and Tailwind CSS
--------------------
Expand Down Expand Up @@ -118,7 +118,7 @@ when multiple other variant conditions are met:
// class="alert bg-green text-sm"

{{ include('alert.html.twig', {color: 'red', size: 'md'}) }}
// class="alert bg-green text-lg font-bold"
// class="alert bg-green text-md font-bold"

Default Variants
----------------
Expand All @@ -128,7 +128,7 @@ If no variants match, you can define a default set of classes to apply:
.. code-block:: html+twig

{% set alert = html_cva(
base='alert ',
base='alert',
variants={
color: {
blue: 'bg-blue',
Expand Down Expand Up @@ -158,7 +158,7 @@ If no variants match, you can define a default set of classes to apply:
{# index.html.twig #}

{{ include('alert.html.twig', {color: 'red', size: 'lg'}) }}
// class="alert bg-red text-lg font-bold rounded-md"
// class="alert bg-red text-lg rounded-md"

.. note::

Expand Down

0 comments on commit 0ca3815

Please sign in to comment.