HTML5 Web Component for Country Flags

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Recently I discovered the huge free data sets on, and I am actually planning a series of HTML5 Web Components which utilize this data. The first one is X-Flag – a custom HTML5 tag, able to display country flags out of a specified country code in three different sizes:

[sourcecode language=”html”]
<acidjs-xflag code="bg"></acidjs-xflag>
<acidjs-xflag code="cz" size="small"></acidjs-xflag>
<acidjs-xflag code="de" size="medium"></acidjs-xflag>
<acidjs-xflag code="mt" size="large"></acidjs-xflag>


HTML Attributes of the <acidjs-xflag></acidjs-xflag> Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

JavaScript Methods of the <acidjs-xflag></acidjs-xflag> Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. On it you will also find a download link. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Categories and Tags

© 2006 - 2018 Martin Ivanov