A - Infobox Sample Code
Styles used on the Vermont Sales website related to product descriptions are referenced in the product-rendering.css file.
The CSS file contains styling for each brand with a brand logo rendered and the styles for the product title.
The applicable CSS file will change regularly as required. Vermont Sales adds new products regularly to their extensive catalogue. Fresh functionality is also added regularly to the account pages.
Use these links in B2C websites to render product descriptions:
<link href="image/journal3/catalog/view/theme/journal3/stylesheet/product-rendering.css" type="text/css" rel="stylesheet" media="all" /><link href="image/journal3/catalog/view/theme/journal3/stylesheet/bootrap4-helper.css" type="text/css" rel="stylesheet" media="all" />
The Caution Box
<p class="caution_box">...</p>
CAUTION:
a statement
or event that warns of something or that serves as a cautionary
example.
<div class="caution_box">...</div>
WARNING:
KEEP OUT OF REACH OF
CHILDREN Swallowing may lead to serious injury or death
in as little as 2 hours due to chemical burns and potential
perforation of the esophagus. Immediately see a doctor,
have a doctor phone one the following Emergency Numbers (For
RSA) *Poison Information Centre - 086 155 5777 - *Ambulance
- 10177. Keep in original package until ready to use.
Dispose of used batteries immediately. Risk of injury due to
fire, explosion or leakage. Do not disassemble, charge, crush
or expose to fire or high temperatures.
Time Box
Describe your story here and use any formating tags you need to make this awesome. Please use the class="stopwatch-info-block-title" to add a title and not other methods. See the code example below explaining how to apply this
<div class="stopwatch-info-block">
<div class="stopwatch-info-block-content">
<div class="stopwatch-info-block-title">...Your Title...</div>
<div class="stopwatch-info-block-text">...text comes here...</div>
</div>
</div>
Definition Box
<p class="definition-products">...</p>
Definition:
A definition is a statement that explains the meaning of a word, term, concept, or idea. It clarifies what something is by providing its essential characteristics, often in a concise and precise way. Definitions can vary based on context, purpose, and the audience they are intended for.
<div class="definition-products">...</div>
WARNING:
KEEP OUT OF REACH OF
CHILDREN Swallowing may lead to serious injury or death
in as little as 2 hours due to chemical burns and potential
perforation of the esophagus. Immediately see a doctor,
have a doctor phone one the following Emergency Numbers (For
RSA) *Poison Information Centre - 086 155 5777 - *Ambulance
- 10177. Keep in original package until ready to use.
Dispose of used batteries immediately. Risk of injury due to
fire, explosion or leakage. Do not disassemble, charge, crush
or expose to fire or high temperatures.
Box for providing TIPS
<p class="tip-products">...</p>
The definition of a tip is secret information or advice given to be helpful. An example of a tip is a chef sharing a cooking secret with someone. Tip is defined as the top or cap to something, or the end of a sharp tool. An example of a tip is the highest pointed part of an iceberg.
<div class="tip-products">...</div>
What does it mean to tip someone?
countable noun. If you give a tip to someone such as a waiter in a restaurant, you give them some money to thank them for their services.The definition of a tip is secret information or advice given to be helpful. An example of a tip is a chef sharing a cooking secret with someone. Tip is defined as the top or cap to something, or the end of a sharp tool. An example of a tip is the highest pointed part of an iceberg.
Box for providing Important Information
<p class="info-products">...</p>
...information, knowledge, and learning mean what is or can be known. information may be used of a collection of facts gathered from many places. The book has a ...
<div class="info-products">...</div>
Information
- knowledge communicated or received concerning a particular fact or circumstance; news:information concerning a crime.
- knowledge gained through study, communication, research, instruction, etc.; factual data:His wealth of general information is amazing.
- the act or fact of informing.
- an office, station, service, or employee whose function is to provide information to the public:The ticket seller said to ask information for a timetable.
- Directory Assistance.
- Law.
- an official criminal charge presented, usually by the prosecuting officers of the state, without the interposition of a grand jury.
- a criminal charge, made by a public official under oath before a magistrate, of an offense punishable summarily.
- the document containing the depositions of witnesses against one accused of a crime.
Box for Focusing Attention
<p class="attention-products">...</p>
...to watch, listen to, or think about something or someone carefully or with interest
<div class="attention-products">...</div>
Notice, thought, or interest:
- Ladies and gentlemen, could I have your attention, please?
- They're organizing a campaign to draw people's attention to the environmentally harmful effects of using their cars.
- Wait a moment and I'll give you my full/undivided attention (= I'll listen to and think about only you).
- After an hour, my attention started to wander (= I stopped taking notice).
Box for Reading Manual Notice
<p class="readmanual-products">...</p>
Manual definition is - of, relating to, or involving the hands. How to use ... Other Words from manual Synonyms More Example Sentences Learn More about manual ... Please tell us where you read or heard it (including the quote, if possible).
<div class="readmanual-products">...</div>
RTFM is an initialism for the expression "read the flippen manual" - typically used to reply to a question that could have been easily answered from the product manual or documentation.
In expurgated texts, substitutions such as "read the frickn' manual", "read the factory manual", "read the flaming manual", "read the fine manual", "read the friendly manual", "read the [pause] manual" or similar variants are used.
Box for Warnings
<p class="warning-products">...</p>
A warning is something which is said or written to tell people of a possible danger, problem, or other unpleasant thing that might happen.
<div class="warning-products">...</div>
1. COUNTABLE NOUN [oft NOUN that, NOUN to-infinitive]
A warning is something which is said or written to tell people of a possible danger, problem, or other unpleasant thing that might happen. The minister gave a warning that if war broke out, it would be catastrophic. He was killed because he ignored a warning to put stronger cords on his parachute. The week's second severe weather warning for heavy rain was issued yesterday. [+ for]
2. VARIABLE NOUN [oft without N]
A warning is an advance notice of something that will happen, often something unpleasant or dangerous. The soldiers opened fire without warning. With no warning, he was fired from his job. At the White House, U.S. officials said they had some advance warning of the coup attempt. Synonyms: notice, notification, word, sign More Synonyms of warning
3. ADJECTIVE [ADJECTIVE noun]
Warning actions or signs give a warning. She ignored the warning signals. Some fog warning signs had been put up with flashing yellow lights.
Box for Note the Following
<p class="note_box">...</p>
noun. a brief record of something written down to assist the memory or for future reference. notes, a record or outline of a speech, statement, testimony, etc., or of one's impressions of something. ... a brief written or printed statement giving particulars or information.
<div class="note_box">...</div>
- A brief record of something written down to assist the memory or for future reference.
- Notes, a record or outline of a speech, statement, testimony, etc., or of one's impressions of something.
- An explanatory or critical comment, or a reference to some authority quoted, appended to a passage in a book or the like:a note on the origin of the phrase.
- A brief written or printed statement giving particulars or information.
Box for sharing Knowledge
<p class="knowledge_box">...</p>
Definition paragraphs, generally speaking, don't have conclusion sentences; instead, the first sentence is the definition, and the rest of the paragraph expands on it. ... A definition paragraph is a type of paragraph used to define a term or phrase that will be used in an writing piece.
<div class="knowledge_box">...</div>
Definition of knowledge
-
-
- the fact or condition of knowing something with familiarity gained through experience or association
- acquaintance with or understanding of a science, art, or technique
-
- the fact or condition of being aware of something
- the range of one's information or understanding answered to the best of my knowledge
-
Box for Quick Info : Feature Box
<p class="feature_box">...</p>
Diameter: 12 mm
Cutting Length: 28 mm
Max Operating Speed: 65000RPM
Specifications Tables
Styles applicable to tables used for specifications
Technical parameters:
| Description | Spec |
| APPEARANCE | Pale amber liquid |
| ODOUR | Sweet ethereal |
| SPECIFIC GRAVITY AT 20˚C | 1.295 |
| SOLUBILITY | Insoluble in water |
| FLASH POINT | Non-flammable |
| PRODUCT SIZE | 400ml Aerosol |
| MANUFACTURER CODE | 1843 |
Format the table structure as follows:
- The table should follow Bootstrap formatting thus apply styles .table and .SpecsTable
- Use <thead> and <tbody> tags to follow proper rules
- Class .SpecsSubHeading will format the headings
- Class .SpecLeft will format left column darker and bolder
- Class .SpecRight will format the value in a different colour and lighter font
<table class="table
SpecsTable">
<thead>
<tr>
<th class="SpecsSubHeading">Description
</th>
<th class="SpecsSubHeading">Spec
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="SpecLeft">APPEARANCE
</td>
<td class="SpecRight">Pale
amber liquid </td>
</tr>
</tbody>
</table>
<ul class="sideline-bullet">...</ul>
Key Features:
- Perfect Fit for Connector System: The D6x40 dowels are specifically designed for the basic structure connector system, eliminating the need to switch between dowel cross cuts and connector cross cuts.
- Enhanced Load Transfer: These dowels provide additional load transfer along with the connectors.
- Increased Stability: The cross section of a DOMINO dowel is equivalent to that of three round dowels of the same drill diameter, making it exceptionally sturdy.
- Precise Alignment: Laterally projecting guide ribs center the dowel in the middle of the DOMINO milling groove, ensuring perfect alignment of workpieces.
- Efficient Glue Distribution: Specially designed glue pockets and longitudinal grooves ensure even glue distribution for optimal bonding. Excess glue escapes through the lateral grooves, preventing buildup.
- Twist-Proof from the Start: DOMINO dowels are 100% rotation-proof from the moment they are inserted.
- Quick Identification: Imprinted size specifications make it easy to find the right dowel.
- Material: Made from beech wood, ensuring sustainability and environmental responsibility.
This guide provides a framework for creating styled content blocks using HTML and CSS, featuring a responsive design for both desktop and mobile. Here's a breakdown of the steps:
This is Step One. If you want to display the code as two columns side-by-side, simply wrap your code with the div container:
<div class="two-columns"></div>
To display is as a single column, use it without the wrapper above.
Note: that the code also caters for mobile to always display as a sngle column on mobile devices
Each block uses simple code as follows:
<div class="framed-note framed-block">
<span class="framed-note-meta">The framed-note-meta comes here as TITLE</span>
<p>.....</p>
</div>
This is a block with a link for navigation. This functionality allows one to put anything in the box. You can even use Font-Awesome code straight from the Font Awesome website.
<div class="framed-note framed-block">
<span class="framed-note-meta"><a href="#">The framed-note-meta comes here as a LINK</a></span>
<p>.....</p>
</div>
This is Step Two without a link to explain the very next steps that follow. Useful to explain tips of the day or website tips. Simple code that required no extra work to make it work
<div class="framed-note framed-block">
<span class="framed-note-meta">The framed-note-meta comes here as TITLE</span>
<p>.....</p>
</div>
This is Step Three without a link to explain the very next steps that follow. Useful to for blog stories and ideas that needs to stand out in your blog article. Simple code that required no extra work to make it work. You can use images as per example below.
Sometimes you want to use buttons or links to other information. It is as simple as applying the code as displayed below
<div class="framed-note framed-block">
<span class="framed-note-meta"> ... your heading ... </span>
<p> ... your story ... </p>
<p class="framed-note-buttons"><a class="btn-framed-note" href="#">Some Button</a><a class="btn-framed-note" href="#">Another Button</a></p>
</div>
This is Step Four without a link to explain the very next steps that follow. Useful to for product descriptions and ideas that needs to stand out in your product's description. Simple code that required no extra work to make it work
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English...
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked...
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words ...
Use this menu inside your information pages or anywhere you like. It is the same small menu used on teh Display Concept pages. One can use these menus seperately next to each other inside the div "info-page-menu". It is styled as display inline flex.
<div class="info-page-menu"> <div class="info-page-navigation">
<h5>Menu Button Name</h5>
<ul>
<li><a href="#">My first link</a></li>
<li><a href="#">My second link</a></li>
<!-- Adding a seperator -->
<li class="sep">This is a separator</li>
</ul>
</div>
</div>