Create concise information in a single line with Twig

So, I basically need to display the following information inline on my website: Just like this:

Family: Open Sans - Variant: Regular Italic

Size: 15px - Line Height: 25px - Paragraph: 15px

Color: grey_3

This is the code snippet:

{% include "../component/1-atom/Typographies/sg-typo-hierarchisation.twig" with {
                typo_hierarchisation: [
                    {
                        title: "Family",
                        value: "Fira Sans",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Variant",
                        value: "ExtraBold",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Size",
                        value: "50px",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Line Height",
                        value: "50px",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Paragraph",
                        value: "25px",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Color",
                        value: "universe color",
                        value_2: "primary_ {{ universe }}",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    }
                ]
            }%}

Here is the content of the included file:

<ul class="sg-typo-hierarchisation">
    {% for item in typo_hierarchisation %}
    {% set trait = "<i class='trait'> — </i>" %}
        <li class="sg-typo-hierarchisation-item">
            <span class={{item.class_regdivar ? item.class_regular: ""}}>{{ item.title ? item.title : "" }}</span>
            <span class={{item.class_bold}}>{{ item.value ? " : " ~ item.value : "" }}</span>
            {{ item.value_2 ? ('<span class=' ~ item.class_bold ~ '>' ~ trait ~  item.value_2  ~ '</span>')|raw : '' }}
        </li>
    {% endfor %}
</ul>

As of now, this is how it's rendered:

Family: Fira Sans

Variant: ExtraBold

Size: 50px

Line Height: 50px

Paragraph: 25px

Color: universe color - primary_ {{ universe }}

Edit: On inspecting the website, here's the output:

<ul class="sg-typo-hierarchisation">
                <li class="sg-typo-hierarchisation-item">
            <span class="">Family</span>
            <span class="fw-bold-i"> : Fira Sans</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Variant</span>
            <span class="fw-bold-i"> : ExtraBold</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Size</span>
            <span class="fw-bold-i"> : 50px</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Line Height</span>
            <span class="fw-bold-i"> : 50px</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Paragraph</span>
            <span class="fw-bold-i"> : 25px</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Color</span>
            <span class="fw-bold-i"> : universe color</span>
            <span class="fw-bold-i"><i class="trait"> — </i>primary_ {{ universe }}</span>
        </li>
    </ul>
htmlcsstwig

Answer №1

If you want to organize your data by grouping attributes, you need to reformat it. Currently, you are passing a single large array which makes it impossible to group.

{% set typo_hierarchisation = [
    [
        { 'title' : 'Famille', value: 'Fira Sans' },
        { 'title' : 'Variante', value : 'ExtraBold' },
    ],[
        { 'title': 'Taille', value: '50px' },
        { 'title': 'Interlignage', value : '50px' },
        { 'title': 'Paragraphe', value: '25px' },
    ],
] %}


<ul>
{% for group in typo_hierarchisation %}
    <li>
        {% for item in group %}
        <div>
            <span>{{ item.title }}</span>
            <span>{{ item.value }}</span>
        </div>
        {% endfor %}
    </li>
{% endfor %}
</ul>

Check out the demo here

Just a heads up: I've used a div element to "group" the attributes. Remember, this is a block element by default so some additional CSS may be needed to display them side by side

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with HTML and Escaping Challenges in jQuery Functions

Here is a string I have: var items = "<div class='item'><div class='item-img' style='background-image: url('images.123.jpg')'></div></div>" I am looking to update the inner HTML of a div: $ ...

javascriptjqueryhtml

A horizontal line will separate the title both before and after

Is there a way to create an hr line both before and after a title using Bootstrap 5? I have managed to add the lines, but I am struggling to align the title within a container class in order for the lines to span the width of the screen. My current code s ...

htmlcssbootstrap-5

Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...

javascripthtmljquerycss

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere. I ...

javascriptandroidhtmlcsswebview

Retrieve information from the Django database

I am encountering an issue while trying to retrieve data from a form in a Django database. When using .cleaned_data['name'], I am receiving an attribute error: 'SnippetForm' object has no attribute 'cleaned_data'. Addition ...

pythonhtmldjango

Accordion Element using HTML and CSS

Seeking assistance with a website project! I am in need of help in implementing the following feature: I would like the "About" link to expand into a panel when clicked, and retract back when the user clicks "hide" within the panel. Check out the attached ...

htmlcss

Unveiling the mystery of extracting information from a string post serialization

When working with a form, I am using this jQuery code to fetch all the field values: var adtitletoshow = $("#form_data").serialize(); After alerting adtitletoshow, it displays something like this - &fomdata1=textone&fomdata2=texttwo&fomdat ...

javascriptjqueryformshtml

Changing the value of a user object's variable in Django

I have been working on implementing a feature that allows users to edit their personal information in a Django project using Django forms. However, after entering new values in the form and hitting enter, the user is redirected back to the main profile pag ...

pythonhtmldjango

Unused sizing attributes in IMG tags

I can't seem to figure out what's going wrong here... I want the image tag to initially display the 250px wide "small" image, and then allow the browser to select the most suitable image using the srcset and sizes attributes - essentially, the " ...

html

Styling Radio Buttons and Links in Horizontal Layout Using Bootstrap

Encountering an issue in Bootstrap while attempting to incorporate custom radio buttons and a hyperlink in the same row. It seems that either the hyperlink functions OR the data-toggle feature for radio buttons works, but not both simultaneously, especiall ...

cssbootstrap-4

Is it possible to incorporate Microdata from HTML5 into an XHTML Strict website while remaining compliant?

I have a website coded in XHTML 1.0 Strict and I am looking to incorporate Microdata for breadcrumbs so that Google can better understand them. Currently, my non-microdata marked-up breadcrumbs are structured like this: <ul> <li><a href= ...

validationhtmlbreadcrumbsxhtml-1.0-strictmicrodata

Display the actual runtime hyperlink while utilizing the asp tag helper

Whenever I use asp-tag helpers to create a hyperlink, the result is displayed like this: <a asp-page="/demo">Demo</a> The actual html output looks like this: <a href="/test/Demo">Demo</a> However, instead of displaying "Demo" to ...

c#htmlasp.net-core

Including emoticons in text without impacting the 'line-height'

Is there a way to add an emoticon within a paragraph without altering the line-height, regardless of the size of the emoticon? For example: I've tried using position: absolute or vertical-align: text-top, but neither seems to work. p img { hei ...

cssemoji

Adjust the size of a Highcharts chart before printing

I'm facing an issue with a chart that doesn't have a specified height or width. My goal is to print the graph in a taller and larger size when I click on the print button. I attempted to use setSize() function, but since there are no original di ...

javascriptjqueryhtmlcsshighcharts

An intuitive guide on showcasing the dynamically generated variables' values with AngularJS

I am facing an issue with my HTML template code: <p>{{"fieldname_"+lang}}</p> Within the controller, I have defined the following: $scope.lang = "mr"; $scope.fieldname_mr = "Dynamic variable"; My expected result is Dynamic variable, however ...

htmlangularjs

Create a unique custom design for your Mapbox GL control

When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...

cssangulartypescriptsassmapbox-gl

Guide to embedding an iframe generated with JavaScript into a React component

I'm currently working on developing an app that will utilize an iframe. The goal is to have controllers in place to adjust the style of the iframe and add text to it, essentially creating a preview function. I've been attempting to use Javascript ...

javascripthtmlreactjsiframereact-router

Obtaining the element ID with Selenium WebDriver in cases of dynamic IDs

I am encountering an issue with the drop-down image element. I have attempted various methods to select the element, but none of them seem to be working. This may be due to the fact that both elements are identical and their IDs are dynamic. I did manage ...

javahtmlseleniumselenium-webdriver

The Best Way to Calculate a Total Sum with Comma-Separated Values in AngularJS

In my application, I am utilizing the MEAN stack with AngularJS as the front-end. I am trying to figure out how to calculate the total sum and include comma values. I have managed to get the total sum value, but the comma value is not being calculated prop ...

htmlcssangularjsmeanjs