Interactive Elements

> In-text link

This is an In-text Link to Hi-Res Forum.

EXAMPLE CODE

<p>This is an <a href="https://www.hi-res.com.cn" target="_blank">In-text Link</a> to Hi-Res Forum.</p>

> Navigation Link - Default Button

CSS selector:

.button-nav

Rendered element:

Default Button

EXAMPLE CODE

<a class="button-nav" href="#"><span>Default Button</span></a>

> Navigation Link - Active Button

CSS selector:

.button-nav active

Rendered element:

Active Button

EXAMPLE CODE

<a class="button-nav active" href="#"><span>Active Button</span></a>

> Text Input Field with Label

Enter Username / E-Mail Address

EXAMPLE CODE

<div class="input-wrapper-w30r input-style-ralign input_style_full_width">
	<label for="ibox_username">Enter Username / E-Mail Address</label>
	<input required="" type="text" class="form-control" id="ibox_username" placeholder="name@example.org">
</div>

> Image as a Link

We don't have this kind of widget yet. We only have images without link, or images with caption.

Text Elements

> Headings

[EXAMPLE H1] Style Guide

[EXAMPLE H2] Amplifier Reviews

[EXAMPLE H3] Comments

EXAMPLE CODE

<h1>[EXAMPLE H1] Style Guide</h1>
<h2>[EXAMPLE H2] Amplifier Reviews</h2>
<h3>[EXAMPLE H3] Comments</h3>

> Paragraphs

Hi-Res Forum is an "audio enthusiast equipment recommendation and e-commerce integration" website dedicated to using scientific data to analyze equipment performance/sound quality. We are committed to eliminating bad merchants in the audio enthusiast circle who use metaphysics to recommend high-priced equipment.

EXAMPLE CODE

<p><a href="https://www.hi-res.com.cn" target="_blank">Hi-Res Forum</a> is an "audio enthusiast equipment recommendation and e-commerce integration" website dedicated to using scientific data to analyze equipment performance/sound quality. We are committed to eliminating bad merchants in the audio enthusiast circle who use metaphysics to recommend high-priced equipment.</p>

> Numbered Lists

Some 1st Ranking Speakers Model
Some 2st Ranking Speakers Model
Some 3st Ranking Speakers Model

EXAMPLE CODE

<ol>
    <li class="ol-li-styled">Some 1st Ranking Speakers Model</li>
    <li class="ol-li-styled">Some 2st Ranking Speakers Model</li>
    <li class="ol-li-styled">Some 3st Ranking Speakers Model</li>
</ol>

Combined Elements

> Product/Service Listing

Headphones

Hifiman Susvara

CAD $7999.00CAD $8500.00

Product Details

EXAMPLE CODE

<div class="products_layout">
	<div class="product-card-w23r">
		<div class="img-wrapper">
			<img src="./src/img/listings/hifiman_susvara.jpg" alt="Hifiman Susvara - Hi-Fi Headphones">
			<ul class="hover-menu">
				<li><a href="https://www.hifiman.com/products/detail/275" target="_blank" rel="nofollow"><i class="fa-solid fa-arrow-up-right-from-square"></i>&nbsp;&nbsp;Official Site</a></li>
				<li><a href="https://crinacle.com/rankings/headphones/" target="_blank" rel="nofollow"><i class="fa-solid fa-arrow-up-right-from-square"></i>&nbsp;&nbsp;Review Article</a></li>
				<li><a href="https://graph.hangout.audio/headphones/?share=Harman_without_Bass_Shelf_Target,Susvara" target="_blank" rel="nofollow"><i class="fa-solid fa-arrow-up-right-from-square"></i>&nbsp;&nbsp;Measurement Data</a></li>
			</ul>
			<div class="pciw_corner_tag">
				<span>Headphones</span>
			</div>
		</div>
		<div class="caption">
			<div class="title">Hifiman Susvara</div>
			<div class="price"><span class="discount_price">CAD $7999.00</span><span class="original_price_del">CAD $8500.00</span></div>
		</div>
		<div class="pc_buy_btn">
			<a class="default-btn-black" href="./pages/simulated_dynamic_pages/product_details/susvara.html">
				<span>Product Details</span>
			</a>
		</div>
	</div>
</div>

> Address Widget

8888 University Crescent, Burnaby, BC, V5A 4X9

Canada

Deliver to: Enson YAN

Add new address

EXAMPLE CODE

<div class="widget_box">
    <div class="address_selected">
        <div class="address_row">
            <i class="fa-solid fa-map-location-dot"></i>
            <div id="address_text">
                <div id="addr_details">8888 University Crescent, Burnaby, BC, V5A 4X9</div>
                <div id="country">Canada</div>
            </div>
        </div>
        <div class="deliver_to">Deliver to: Enson YAN</div>
    </div>
    <div class="separator"></div>
    <div class="add_new"><i class="fa fa-plus"></i> Add new address</div>
</div>

> Card Widget

3798******51001

Cardholder Name: Enson YAN

Add new card

EXAMPLE CODE

<div class="widget_box">
    <div class="card_selected">
        <div><i class="fa-brands fa-cc-amex"></i> 3798******51001</div>
        <div class="cardholder">Cardholder Name: Enson YAN</div>
    </div>
    <div class="separator"></div>
    <div class="add_new"><i class="fa fa-plus"></i> Add new card</div>
</div>

> Purchase Details Widget

Hifiman Susvara (XLR 4-Pin Cable)

Qty: 1

CAD $7999.00

CAD $8500.00

EXAMPLE CODE

<div class="product_box">
    <div class="product_row">
        <img src="./src/img/listings/hifiman_susvara.jpg" alt="Product Image" class="product_img">
        <div class="product_info">
            <div class="product_top">
                <div class="product_name">
                    Hifiman Susvara (XLR 4-Pin Cable)
                    <div class="product_qty">Qty: 1</div>
                </div>
                <div class="product_price">
                    <div class="current_price">CAD $7999.00</div>
                    <div class="old_price">CAD $8500.00</div>
                </div>
            </div>
        </div>
    </div>
</div>

> Section Title

Example Section Title

EXAMPLE CODE

<div class="section_title">Example Section Title</div>