Open In App

Blaze UI Addresses

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has excellent different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI provides an Address feature to any website, the address provides the receiver information i.e. where the data is to be sent, here address is similar to the address of a letter.

Blaze UI Addresses CSS classes:

  • c-address: This class is used to add the Blaze UI Address.
  • c-address__heading: This class is used to add the heading of the address or the main location. 
  • u-text–help: This class is used to add the helper text such as postal code.

Syntax: 

<address class="c-address">
    <span class="c-address__heading">...</span>
    <span class="u-text--help" title="...">...</span>
</address>

We can add an address feature using the blaze-address tag provided by Blaze UI without defining any class. For this follow the following given syntax.

Syntax:

<blaze-address>
    <blaze-address-heading>
        ...
    </blaze-address-heading>
        ...
</blaze-address>

Example 1: The following code demonstrates the Blaze UI addresses feature using the Blaze UI address tag.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h3>Blaze UI Addresses</h3>
      
    <blaze-address>
        <blaze-address-heading>
            Address header
        </blaze-address-heading>
        Address line #1
        <br />
        Address line #2 <br />
        Postal Code
    </blaze-address>
</body>
  
</html>


Output: 

 

Example 2:  The following code demonstrates the Blaze UI address using the Blaze UI CSS Classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        Blaze UI Addresses using CSS Classes
    </h3>
      
    <address class="c-address">
        <span class="c-address__heading">
            Address header
        </span>
        <br />
        Address Line #1 <br />
        Address Line #2
        <br />
        <span class="u-text--help" 
            title="Postcode">Postal Code
        </span>
    </address>
</body>
  
</html>


Output:

 

Reference: https://www.blazeui.com/components/addresses/



Last Updated : 04 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads