Omkeren fontweight description list

[jmassink]

Describe the issue

Wij zouden graag een description list willen hebben, waarbij de titels bold zijn en de details normal. Zie screenshots. Momenteel hebben we dit geimplememteerd met inline styling.

Daarnaast is de titel / detail ratio 1 op 3. Omdat we een breed scherm hebben, hebben we dit aangepast naar 1 op 4.

Checklist

• [ ] Optie om fontweight om te draaien (titel: bold, detail normal)
• [ ] Aanpassen van de ratio titel/detail

Screenshot

Huidige implementatie.

PS: we hebben ook styling in een van de velden. Daar vinden jullie ook vast iets van

code implementatie

                        <DescriptionList>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Gaat naar school
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                Ja
                            </DescriptionList.Details>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Schoolnaam
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                Duckstad College
                            </DescriptionList.Details>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Is er sprake van verzuim?
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                Ja
                            </DescriptionList.Details>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Aanvullende informatie
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                <RichTextView
                                    style={{ maxWidth: '50rem' }}
                                    richText={
                                        leefgebieden[1].content ?? NO_CONTENT
                                    }
                                />
                            </DescriptionList.Details>
                    </DescriptionList>

[VincentSmedinga]

Ha Jasper, dank voor je feedback!

Toevallig zijn we net al even bezig met de vormgeving van Description List – zie dit ticket in Jira.

Bold vs regular Zo’n soort tabel met ‘label/value pairs’ is inderdaad een bekend patroon en wordt in diverse situaties gebruikt. In sommige lijkt het logischer de labels vetgedrukt te tonen, in andere juist de values. NL Design System onderscheidt bijvoorbeeld nog een Summary List dat hierop lijkt. Wel zien we dat nagenoeg alle gemeenten de labels vetgedrukt maken en de values niet. Goede kans dus dat dat binnenkort ook onze standaard wordt; of misschien dat we beide opties aanbieden.

Kolombreedtes Het is inderdaad nog niet mogelijk om de verhouding tussen de kolombreedtes te bepalen. Dat is een logische feature; we gaan er iets voor bedenken.

Rijke inhoud van een waarde De waarde van het veld ‘Algemene informatie’ is inderdaad vrij uitgebreid. Op zich mag dat en kan dat al – we gebruiken een <dd> en daarbinnen staat HTML allerlei elementen toe. Dus op zich is dit oké. Probeer wel in de gaten te houden dat de layout begrijpelijk blijft – al gok ik dat deze inhoud vooral om te testen is en dat wat in de applicatie zou verschijnen wat compacter is.