> For the complete documentation index, see [llms.txt](https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/mfn-widgets/report-archive.md).

# Report archive

The general purpose of the report archive widget is a to provide a overview of a companys published reports

This widget is implemented as a Datablocks widget and uses the Datablocks [JS-Loader](https://modfin.gitbook.io/datablocks/-LYRjiiPF4zveC0T_zB_/integration/js-loader) to load the widget. Where `<TOKEN>` is a unique Datablocks widget token.

```javascript
<div id="archive-module"></div>

<script>
    (function(widgets) {
        var url = "https://widget.datablocks.se/api/rose";
        if (!window._MF) {
            var b = document.createElement("script");
            b.type = "text/javascript";
            b.async = true;
            b.src = url + "/assets/js/loader-v5.js";
            document.getElementsByTagName("body")[0].appendChild(b);
		    }
		    window._MF = window._MF || {
            data: [],
            url: url,
            ready: !!0,
            render: function() { window._MF.ready = !0 },
            push: function(w) { window._MF.data.push(w) }
		    };	
		    window._MF.push(widgets);
    })([{
        query:"#archive-module"
        ,widget: "archive"
        ,locale: "en"
        ,token: "<TOKEN>"
    }]);
</script>
```

## Example

Here are two customer examples of how to implement the report archive.&#x20;

### [Nolato](https://www.nolato.com/sv-SE/IR/Investors/Reports-listing)

### [Vestum](https://www.vestum.se/ir/finansiella-rapporter/)

## Example styling

Bellow is an example of a styled report archive with the  used CSS&#x20;

<figure><img src="/files/DSVSj8JfYVhmILrtjeqS" alt=""><figcaption></figcaption></figure>

### CSS

```css
/* Change font */
.mfn-archive{
font-family: "EuclidCircularB", sans-serif;
}

/*change width on table */
.mfn-archive table{
    width: 80%
}

/* Font-weight on titles*/
.mfn-archive-header{
font-weight: 700;
}

/* Change height of events */
.mfn-archive-event-heading{
height: 95px;
}

/*Change color of title-background*/
.mfn-archive-year tr:first-of-type td{
background: #001965;
}

/* Change color on icons, find filter here: https://isotropic.co/tool/hex-color-to-css-filter/ */
.mfn-archive img{
    filter: invert(16%) sepia(16%) saturate(6555%) hue-rotate(206deg) brightness(94%) contrast(124%);
}
```