search

Styling with Law Widgets

Adding styles to the document content.

hashtag
In this section

  • Installing the Law Widgets web components library

  • Using Law Widgets to add styles to document content

  • Customising styles with CSS

hashtag
Law Widgets

Akoma Ntoso HTML documents don't look very good without styling. Laws.Africa's Law Widgetsarrow-up-right is a collection of web components that make it simple to style the HTML provided by the Laws.Africa Content API.

Using Law Widgets is easy:

  1. Add a reference to the Law Widgets javascript.

  2. Use the law widgets in your HTML.

We'll use the <la-akoma-ntoso>arrow-up-right widget to apply appropriate styles to the expression HTML in expression_detail.html.

expression_detail.html
<html>
<head>
  <title>{{ expression.title }}</title>
  <!-- add the law widgets javascript -->
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@lawsafrica/law-widgets@latest/dist/lawwidgets/lawwidgets.esm.js"
  ></script>
</head>
<body>
  <a href="{% url 'home' %}">Home</a>
  
  <h1>{{ expression.title }}</h1>
  
  <!-- use la-akoma-ntoso law widget to apply styles -->
  <la-akoma-ntoso frbr-expression-uri="{{ expression.frbr_uri }}">
    {{ expression.content|safe }}
  </la-akoma-ntoso>
</body>

If you refresh your expression page in your browser, you should now have a well-styled document.

circle-info

You can also work directly with the Law Widget SCSS styles without using Law Widgets. See https://github.com/laws-africa/law-widgets/tree/main/law-widget-stylesarrow-up-right for more details.

hashtag
The frbr-expression-uri attribute

We included the frbr-expression-uri attribute on the <la-akoma-ntoso> element. If you inspect the <la-akoma-ntoso> element in your browser's inspector, you'll see that new attributes have been added automatically:

These additional attributes are derived from the Expression FRBR URI. They allows Law Widgets (and you) to customise the applied styles depending on a country's legal tradition.

For example, in Namibia's legal tradition editorial comments are green and bold. This styling is applied based on CSS selectors that work on the FRBR attributes added above.

circle-info

The different legal tradition styles that Law Widgets supports are in the traditions folder in the GitHub repoarrow-up-right.

hashtag
Customising styles

You can easily apply your own CSS styles to the Akoma Ntoso HTML using regular CSS selectors.

For example, we can add a red border to all sections, except for Kenya (country code KE) where we can add a green border:

You can use different attribute-based CSS selectors to change styling for different document types, countries, localities and languages.

PreviousExpression detail pageNextAdding interactivity

Last updated