diff --git a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss index 69b0e4bdb5046d09111f6366da97df58d45aadc3..8de81b610c8a5a50b8124cf463565ef7aaeb9444 100644 --- a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss +++ b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss @@ -633,6 +633,13 @@ are the same height. */ font-size: var(--font-size-00); line-height: var(--font-lineheight-2); } + + em, i { + font-style: normal; + } + strong, b { + font-weight: bold; + } } } diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig index bfbea4ed26448b4888e3c58231c6dafc38ab48f2..b672b04f5f60b889b132101d275b44867e5db946 100644 --- a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig +++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig @@ -16,6 +16,12 @@ <div class="uw-ff--text uw-ff--text__{{ detail.type }}"> <img src="{{ detail.icon }}" /> </div> + {% elseif detail.type == 'caption' %} + {% if detail.caption %} + <span class="uw-ff--text uw-ff--text__caption"> + {{ detail.caption }} + </span> + {% endif %} {% else %} <span class="uw-ff--text uw-ff--text__{{ detail.type }}">{{ detail.text }}</span> {% endif %} @@ -38,6 +44,12 @@ <div class="uw-ff--text uw-ff--text__{{ detail.type }}"> <img src="{{ detail.icon }}" /> </div> + {% elseif detail.type == 'caption' %} + {% if detail.caption %} + <span class="uw-ff--text uw-ff--text__caption"> + {{ detail.caption }} + </span> + {% endif %} {% else %} <span class="uw-ff--text uw-ff--text__{{ detail.type }}">{{ detail.text }}</span> {% endif %} diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.yml b/src/patterns/04-components/facts-and-figures/facts-and-figures.yml index f71409b37556333565bb3cfd98c1623e3db41061..7ff6dbd419d5803505cf6b42a434f2968f648a54 100644 --- a/src/patterns/04-components/facts-and-figures/facts-and-figures.yml +++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.yml @@ -19,6 +19,9 @@ ffs: - text: 'Small #1' type: 'small' + - + caption: '<p>This <strong>would be</strong> caption</p>' + type: 'caption' - - type: 'infographics' infographics: @@ -71,3 +74,6 @@ ffs: - text: 'Small #1' type: 'small' + - + caption: '<p>This would be caption</p>' + type: 'caption'