Offcanvas Section

You can publish whatever you want in the Offcanvas Section. It can be any module or particle.

By default, the available module positions are offcanvas-a and offcanvas-b but you can add as many module positions as you want from the Layout Manager.

You can also add the hidden-phone module class suffix to your modules so they do not appear in the Offcanvas Section when the site is loaded on a mobile device.

+855 097 91 67 221
info@ratanakiri-boutiquehotel.com
Sangkat boeung kan seng

AGBs Deutschland V26 07 2011_ENG (2) GENERAL TERMS AND CONDITIONS FOR HOTEL ACCOMMODATION AND HOLDING EVENTS I. Area of applicability 1. These general terms and conditions apply for all services and deliveries by the hotel. 2. Should the hotel change its general terms and conditions before the termination of the contract, the updated version is incorporated into the contract if the partner to the contract is informed about this in writing with reference to these legal consequences and the partner does not object to the incorporation within a period of 14 days. 3. The customer’s general terms and conditions shall only form part of this contract if the hotel consents in writing to the incorporation in whole or for individually specified points. II. Conclusion of the contract 1. The contract (hereafter also referred to as the “booking”) comes into effect on request from the customer through the acceptance by the hotel. The hotel is free to confirm the booking in writing. 2. If a third party makes the booking for the customer, it is liable to the hotel as the booking party together with the customer as joint debtor. III. Services, prices, payment, billing 1. The hotel is obligated to perform the services ordered by the customer and agreed to by the hotel. 2. The customer is obligated to pay the hotel the agreed prices for these and other services enlisted. This also applies for hotel services and expenses induced by it for third parties. 3. If the hotel rescinds with good cause, the customer has no claim for compensation. 4. The agreed prices include the current statutory VAT. Should the rate of VAT applicable to the contractual services increase or decrease after the conclusion of the contract, the prices shall be adjusted accordingly. 5. If the period between the conclusion of the contract and the fulfilment of the contract as defined by the contractual agreements exceeds four months and the general price charged for such services is increased by the hotel, this can increase the contractually agreed price as appropriate, but by 5 % at the most. 6. The hotel is entitled to increase the prices if municipal duties (culture tax, visitor’s tax, etc.) for the accommodation are increased. The price increase is limited to the costs of the abovementioned duties. 7. The hotel’s bills are payable immediately upon receipt of the bill without any deduction, unless other payment terms and conditions are expressly agreed. The hotel is entitled to render accumulated claims for payment at any time and to demand immediate payment. If payment is delayed, the hotel is entitled to claim interest for delay amounting to 10% above the base rate for companies and 5% above the base rate for consumers. The hotel is at liberty to prove that the damages are greater. 8. The subleasing and re-leasing of allocated rooms, other rooms, spaces or cabinets as well as inviting to interviews, sales or similar events require the prior written consent of the hotel, whereby § 540 para. 1 sentence 2 BGB [German Civil Code] shall be waived, provided that the customer is not a consumer. 9. The hotel is entitled to demand upon conclusion of the contract an appropriate advance payment or security deposit in the form of a credit card guarantee or similar from the customer. If an advance payment is not made within the agreed period, the hotel can withdraw from the contract and claim compensation for damages. 10. In justified cases (e.g. outstanding payment by the customer or extending the scope of the contract) the hotel is entitled to demand an increase of the advance payment agreed in the contract or an increased security deposit amounting to the expected costs of the accommodation. 11. The hotel is further entitled to demand an appropriate advance payment or a security deposit from the customer at the beginning and during the customer’s stay, provided that such an advance payment or security deposit was not already paid in accordance with the above provisions. 12. The customer can only settle or lower a claim by the hotel with an undisputed or valid claim. IV. Room availability, delivery and return 1. The customer does not acquire any claim for the availability of a particular room, unless the hotel confirmed the availability of a particular room in writing. - 2 - 2. Booked rooms are available to the customer from 15:00 on the day of arrival. The customer has no claim for earlier availability. Guests who arrive before 15:00 can move into their room as early as possible, according to availability. 3. The available rooms are to be taken by 18:00 on the day of arrival. After this time the hotel can book out the rooms to others, unless the customer informed the hotel in advance and in writing that they would arrive later. The hotel is entitled to demand a guarantee for late arrivals. 4. On the agreed day of departure, check-out is at 12:00 at the latest. After that time the hotel can charge 50 % of the agreed price of the room for the additional use of the room up until 18:00, and 100 % from 18:00. Possible further claims for compensation for damages by the hotel are reserved. V. Withdrawal of the customer from the contract for accommodation (cancellation, rescission) 1. A withdrawal by the customer from the contract of accommodation requires the prior written consent of the hotel. Without the hotel’s consent, the customer is obligated to pay 90 % of the contractually agreed price for staying overnight when the room is not occupied. The customer is at liberty to prove that the abovementioned claim does not exist or does not exist to the amount claimed. 2. If a deadline for withdrawal from the contract free of charge was agreed between the hotel and the c ustomer, the customer can withdraw from the contract until that point without initiating claims by the hotel for payment or compensation for damages. The customer’s right to rescind expires if it does not exercise its right to rescind against the hotel by the agreed deadline. 3. Services performed by third parties or special services (e.g. cakes, flowers, etc.) which become useless as a result of the cancellation are to be paid by the customer in full. VI. Withdrawal of the customer from a contract for an event (cancellation, rescission) 1. The customer is only entitled to rescind without charge if this has been agreed with the hotel in writing. Otherwise the hotel is entitled in the case of a cancellation to charge the agreed cost of hire for the event rooms in addition to the costs of preparation in accordance with the following provisions, provided that it is not possible to book the rooms for another customer. 2. The hotel is entitled to charge for the room or the conference package - at a rate of 50 % for cancellation from 6 months before the beginning of the event, - at a rate of 80 % for cancellation from 3 months before the beginning of the event, - at a rate of 90 % for cancellation from 14 days before the beginning of the event. 3. If sales of food and drink are agreed, the hotel is entitled to charge the following additional costs in the case of cancellation: If the customer cancels the booking for an event with agreed food and drink between the 8th and 4th week before the event, the hotel is entitled to charge 35 % of the food sales lost and 20 % of the drinks sales, and is entitled to charge 80 % of the food and drink sales from the 4th weeks until the beginning of the event. The sum for food and drinks is calculated according to the number of participants agreed in the contract. If no sum for food and drinks was agreed in the contract, the cheapest three course menu from the currently valid event offer shall be used as a basis for the all-inclusive price. The food bill will then be calculated using the formula: menu price, banquet x number of people. Drinks sales are calculated as 50 % of the food bill. 4. The customer is at liberty to prove that the hotel is not at any loss as a result of the event not taking place or the loss for the hotel is lower than the flat-rate compensation for damages claimed. VII. Rescission by the hotel 1. If it has been agreed that the customer can rescind without incurring costs within a defined period, the hotel is also entitled to withdraw from the contract within this period. 2. If an agreed advance payment or an advance payment claimed on the basis of these general terms and conditions is not paid by the due date, the hotel is also entitled to rescind the contract. Moreover, the hotel can claim compensation for damages from the customer. - 3 - 3. The hotel is entitled to rescind the contract with immediate effect if, for example, - acts of God and other circumstances which the hotel is not responsible for make the fulfilment of the contract impossible; - bedrooms and other rooms are intentionally booked using misleading or false statements about facts which are material to the contract, e.g. who the customer is or the purpose of the stay; - the hotel has justified reason to assume that the use of hotel services can put at risk the smooth operation of the business, the security or the public reputation of the hotel, unless this is attributable to the hotel’s sphere of responsibility; - the purpose or reason of the stay is illegal; - there is an unauthorised sub-leasing or re-leasing contrary to III. 7. of these general terms and conditions; - the hotel is closed; - proper accommodation and/or proper facilities for an event are not guaranteed because the hotel is being renovated; - the customer withdraws from a part of the contract in the case of a combined accommodation and event contract. VIII. Number of participants, changes to the number of participants and changes to the event location 1. A change in the number of participants registered by the customer of more than 5 % must be notified in writing to the hotel catering department at the latest 7 days before the start of the event, so that it can be acknowledged by the hotel in the bill. Deviations beyond this shall be based on the original number of participants registered less 5 %. 2. An increase in the number of participants of more than 5 % requires the written consent of the hotel. In the case of an increase, the actual number of participants will be used as the basis for the bill. 3. If the number of participants is changed by more than 10 %, the hotel is entitled to exchange the agreed rooms, provided that the size of the new rooms is appropriate for the latest number of participants notified and the rooms are comparably equipped. 4. If necessary the hotel is entitled to move the booked event to another room of the same value. 5. If the agreed start and finishing times of the event are changed without the prior written consent of the hotel, the hotel can charge for the additional costs for the commitment according to § 315 BGB [German Civil Code], unless the hotel is responsible for the change of times. 6. If the event carries on after midnight, the hotel is entitled to charge € 1.50 per guest and hour including VAT. The agreed number of participants is the basis for the number of guests. 7. Displays are not allowed in the foyer and in the lobby. The prior written consent of the hotel is required to place advertising material. IX. Own food and drink 1. Only the hotel provides food and drink for events. Prior written agreement is required for exceptions to this. In these cases, a sum to cover the overhead costs (“corkage”) shall be charged. 2. The customer is fully liable for the food and drinks brought along being fit for consumption and absolves the hotel in this respect from any claims by third parties. 3. The hotel undertakes no liability for the shelf life of the food which is taken away to the hotel after an event at the hotel or taken outside the hotel for private consumption. X. Technical equipment and connections 1. If the hotel procures technical and other equipment from third parties for the customer on its request, it deals in the name of, with the authority of and on behalf of the customer. The customer is liable for handling the equipment with care and for its proper return. It absolves the hotel from all claims by third parties for relinquishment of this equipment. 2. The use of the organiser’s own electrical equipment or that of third parties authorised by the organiser which uses the hotel’s electricity network requires the prior written consent of the hotel. Disruptions or damages to the hotel’s technical equipment caused by the use of this equipment will be at the cost of the organiser, if the hotel was not responsible. The hotel may include and charge at a flat rate the power costs which arise through the use of such equipment. 3. The customer is only entitled to use its own telephone, fax and data carrying equipment with the hotel’s consent. The hotel can charge a connection fee for this. - 4 - 4. Failures in the technical or other equipment provided by the hotel will be corrected as soon as possible. Payments cannot be retained or reduced if the hotel was not responsible for these failures. 5. If the hotel’s technical equipment remains unused because the customer commissioned an external technology company, the hotel is entitled to claim compensation for operating losses. XI. Music shows, artist exhibitions 1. If the rights of third parties are affected by events (copyrights, etc.), the customer is obligated to obtain appropriate permission at its own cost before the event is held and to pay fees which accrue (GEMA fees, etc.) directly. Nevertheless, should fees or claims for compensation for damages be made against the hotel for the reasons stated, the organiser absolves the hotel from such fees or claims for compensation for damages. 2. If liability to contribute to the Künstlersozialkasse [Artist’s Social Welfare Fund] is founded on the basis of artists cooperating in the event, the organiser is obligated to pay these contributions directly. 3. If the hotel engages artists for events for the customer, the hotel is entitled to pass on the fees for Artist Social Welfare to the customer. XII. Decoration material, exhibits for events 1. Decoration material, exhibits or other, also personal items belonging to the customer who is not himself a guest at the hotel, are kept in the event rooms or hotel at the customer’s own risk. The hotel undertakes no liability for loss, destruction or damage to such objects, except in the case of gross negligence or intent by the hotel. Damages resulting from death, injury to body or health are not included in the exclusion of liability. Moreover, all cases in which there is a duty of safekeeping on the basis of the facts in individual cases, the fulfilment of which is actually required before the contract can be properly carried out and whether the customer may have constant trust that it will be observed (material contractual duty) are excluded. 2. Decoration material brought along must comply with the fire protection regulations. The hotel is entitled to demand an official certificate for this. If the customer does not comply with this request from the hotel, the hotel is entitled to remove and store the decoration material at the cost of the customer. Because of the possible damages, it is only permissible to install and fit items on walls and ceilings with the prior written consent of the hotel. 3. All exhibition or other objects brought by the customer or participants of the event are to be removed by the customer immediately after the event finishes. If the customer does not comply with its duty to remove immediately, the hotel is entitled to remove and store the objects at the cost of the customer. If objects remain in the event room, the hotel can charge the agreed price for the room for the duration in which they stay. The customer may still prove that the damages due are lower and the hotel may still prove that they are higher. 4. The customer is to ensure that any waste is properly disposed of according to the relevant statutory provisions. 5. If the customer commissions the hotel with the disposal of packaging material, the hotel is entitled to charge the customer with the costs arising from this. XIII. Customer’s liability The organiser is liable for all damages to the hotel building and its equipment, which was caused by the organiser, event participants, event visitors, the organiser’s staff or other third parties working in its domain. The hotel can demand appropriate securities (e.g. insurance, deposits, guarantees etc.) from the organiser to protect against exposure to liability. XIV. Defects, customer’s obligation to cooperate Should defects in the deliveries or services by the hotel arise or services are disrupted, the customer is to inform the hotel about this immediately after it is identified so that the hotel is able to remedy the fault as quickly as possible or provide the delivery or service as understood under the contract. If this is not possible because of the nature of the defect/disruption or other compelling reasons, notification of defects must in each case be made to the hotel on return of the rooms at the latest. The customer is obligated to keep damages arising to it as low as possible. - 5 - XV. Hotel’s liability 1. The hotel is liable to carry out its contractual duties with the diligence of a prudent businessperson. Claims by the customer for compensation for damages are excluded. Excluded from this are damages arising from death, injury to body or health. Damages due to the intentional or grossly negligent breach of duty by the hotel are also not included in the exclusion of liability. The exclusion of liability also does not include damages arising from the breach of material contractual duties. Material contractual duties are those which are actually required to be fulfilled before the contract can be properly carried out and the customer may place constant trust in their fulfilment. Further, the strict liability imposed by the Produkthaftungsgesetz [law on product liability] remains unaffected as well as the liability arising from a guarantee potentially taken by the hotel. A breach of duty by the hotel has the same consequences for legal representatives or assistants. 2. The hotel is liable to the customer for things brought in according to the statutory provisions (§§ 701 et. seq. BGB [German Civil Code]). 3. If the customer is provided with a place to put the things in the hotel garage or in a hotel parking place, no contract for safekeeping is created. 4. Claims by the customer against the hotel prescribe after a year from knowledge of the facts which found this claim. Claims for compensation for damages prescribe after 5 years whether or not knowledge of them is received. This shortening of the statutory periods of prescription does not apply in the case of culpable death, injury to body or in the case of liability under the product liability law. XVI. Final provisions 1. Alterations and additions to the contract for accommodation and events are required to be in writing to be effective. Waiving the requirement of writing is also required to be in writing. 2. The place of fulfilment and payment is the registered office of the hotel. 3. The place where the hotel has its registered office is the exclusive jurisdiction for commercial issues. Provided that a party to the contract has fulfilled the requirements of § 38 para. 2 ZPO [Code of Civil Procedure] and has no general jurisdiction at in the country, the jurisdiction of the hotel’s registered office applies. 4. The law of the Federal Republic of Germany applies exclusively. The UN Convention on Contracts for the International Sale of Goods and provisions on conflict of laws does not apply. 5. Should individual provisions of the accommodation or event contract or individual provisions of these general terms and conditions for hotel accommodation and for holding events be or become ineffective, the effectiveness of the remaining provisions will remain unaffected by this. Moreover, the statutory provisions apply. 

It's easy to get started creating your website. Knowing some of the basics will help.

What is a Content Management System?

A content management system is software that allows you to create and manage webpages easily by separating the creation of your content from the mechanics required to present it on the web.

In this site, the content is stored in a database. The look and feel are created by a template. Joomla! brings together the template and your content to create web pages.

Logging in

To login to your site use the user name and password that were created as part of the installation process. Once logged-in you will be able to create and edit articles and modify some settings.

Creating an article

Once you are logged-in, a new menu will be visible. To create a new article, click on the "Submit Article" link on that menu.

The new article interface gives you a lot of options, but all you need to do is add a title and put something in the content area. To make it easy to find, set the state to published.

You can edit an existing article by clicking on the edit icon (this only displays to users who have the right to edit).

Template, site settings, and modules

The look and feel of your site is controlled by a template. You can change the site name, background colour, highlights colour and more by editing the template settings. Click the "Template Settings" in the user menu.

The boxes around the main content of the site are called modules. You can modify modules on the current page by moving your cursor to the module and clicking the edit link. Always be sure to save and close any module you edit.

You can change some site settings such as the site name and description by clicking on the "Site Settings" link.

More advanced options for templates, site settings, modules, and more are available in the site administrator.

Site and Administrator

Your site actually has two separate sites. The site (also called the front end) is what visitors to your site will see. The administrator (also called the back end) is only used by people managing your site. You can access the administrator by clicking the "Site Administrator" link on the "User Menu" menu (visible once you login) or by adding /administrator to the end of your domain name. The same user name and password are used for both sites.

Learn more

There is much more to learn about how to use Joomla! to create the web site you envision. You can learn much more at the Joomla! documentation site and on the Joomla! forums.

Base

This section shows the base look of all HTML elements on your page.


Headings

Use the <h1> to <h6> elements to define your headings.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Text-level semantics

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

Element Description
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

Horizontal rule

Create a horizontal rule by using the <hr> element. The greyish line below each section here in the Typography page is an example.


Blockquotes

For quoting multiple lines of content from another source within your document, use the <blockquote> element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Someone famous
<blockquote>
    <p>Quotation</p>
    <small>Source</small>
</blockquote>

Code blocks

For multiple lines of code, use the <pre> element which defines preformatted text. It creates a new text block that preserves spaces, tabs and line breaks. Nest a <code> element inside to define the code block.

IMPORTANTBe sure to escape any angle brackets in the code for proper rendering.

<pre>
    <code>...</code>
</pre>

Lists

Create an unordered list using the <ul> element and the <ol> element for ordered lists. The <li> element defines the list item.

  • Item 1
  • Item 2
    • Item 1
    • Item 2
      • Item 1
      • Item 2
  • Item 3
  • Item 4
  1. Item 1
  2. Item 2
    1. Item 1
    2. Item 2
      1. Item 1
      2. Item 2
  3. Item 3
  4. Item 4
<ul>
    <li>...</li>
    <li>...
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>
<ol>
    <li>...</li>
    <li>...
        <ol>
            <li>...</li>
        </ol>
    </li>
</ol>

NOTEYou can also use additional UIkit classes for the lists. You will find more details here.


Description lists

Create a description list using the <dl> element. Use <dt> to define the term and <dd> for the description.

Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.
<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

NOTEYou can also use additional UIkit classes for the description lists. You will find more details here.


Tables

You can easily create tables using the <table> element. Use <thead> to define the table headings, <tfoot> to define the table footers and <tbody> to define the table body.

Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

<table>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

NOTEYou can also use additional UIkit classes for the tables. You will find more details here.


Form

You can easily create forms that contain different elements like <legend>, <input>, <select>, etc.

Form
<form>
    <fieldset>
        <legend>...</legend>
        <input type="text" placeholder="">
        <input type="password" placeholder="">
        <select>
            <option>...</option>
            <option>...</option>
        </select>
    </fieldset>
</form>

NOTEYou can also use additional UIkit classes for the forms. You will find more details here.

Grid

This section shows how you can create different grids layouts with columns and rows.


Gantry5 Grid System

Gantry5 comes with its own CSS framework called "Nucleus". It is based on the Flexbox model and therefore is really flexible and allows you to build advanced layouts.

Block 1
Block 2
Block 3

<div class="g-grid">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

Gantry5 grid system or better said "Nucleus" grid system does not have a grid gutter, it uses the .g-content class instead.

As you can see in the above example, all 3 blocks are surrounded by empty space. This empty space comes from the .g-content class which adds some margin and padding to the element.

We have added a utility class to the template which takes care of the unnecessary spacing and makes the whole grid looks more natural. The utility class is called .g-gutter.

Block 1
Block 2
Block 3

<div class="g-grid g-gutter">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

"Nucleus" comes with another very useful class called .size-# where # is the percentage of the whole width of the grid a particular element should occupy.

Block 1
Block 2
Block 3

Block 1
Block 2
Block 3

Block 1
Block 2

Block 1
Block 2

<div class="g-grid g-gutter">
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-60">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-60">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block size-25">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-75">
        <div class="g-content">...</div>
    </div>
</div>

UIkit Grid System

The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid columns. It uses units with predefined classes inside each grid, which define the column width.

To create the grid container, add the .uk-grid class to a parent element. Add one of the .uk-width-* classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions.

.uk-width-1-3
.uk-width-1-3
.uk-width-1-3
.uk-width-1-2
.uk-width-1-2
.uk-width-3-10
.uk-width-7-10

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

NOTEYou can find more information about the UIkit Grid System here.

Buttons

This section shows the different button styles and classes you can use.


Default Buttons

Default Button Dark Button Empty Button

<a href="#" class="button">Default Button</a>
<a href="#" class="button dark">Dark Button</a>
<a href="#" class="button empty">Empty Button</a>

Button Colors

Button Grey Button Green Button Orange Button Purple Button Blue

<a href="#" class="button button-grey">Button Grey</a>
<a href="#" class="button button-green">Button Green</a>
<a href="#" class="button button-orange">Button Orange</a>
<a href="#" class="button button-purple">Button Purple</a>
<a href="#" class="button button-blue">Button Blue</a>

Button Icons

Default Button Dark Button Empty Button Button Green Button Purple

<a href="#" class="button"><i class="fa fa-fw fa-download"></i> Default Button</a>
<a href="#" class="button dark"><i class="fa fa-fw fa-star"></i> Dark Button</a>
<a href="#" class="button empty"><i class="fa fa-fw fa-lock"></i> Empty Button</a>
<a href="#" class="button button-green"><i class="fa fa-fw fa-clock-o"></i> Button Green</a>
<a href="#" class="button button-purple"><i class="fa fa-fw fa-arrows"></i> Button Purple</a>

Button Sizes

Button XLarge Button Large Button Medium Button Small Button XSmall

<a href="#" class="button button-xlarge">Button XLarge</a>
<a href="#" class="button dark button-large">Button Large</a>
<a href="#" class="button empty button-medium">Button Medium</a>
<a href="#" class="button button-green button-small">Button Small</a>
<a href="#" class="button button-purple button-xsmall">Button XSmall</a>

Button Block

Default Button
Dark Button
Empty Button

<a href="#" class="button button-block">Default Button</a>
<a href="#" class="button dark button-block">Dark Button</a>
<a href="#" class="button empty button-block">Empty Button</a>

NOTEYou can also use additional UIkit classes for the buttons. You will find more details here.

Alerts

This section shows the different alert styles and classes you can use.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

<p class="alert alert-success">...</p>
<p class="alert alert-info">...</p>
<p class="alert alert-warning">...</p>
<p class="alert alert-error">...</p>

NOTEYou can also use additional UIkit classes for the alerts. You will find more details here.

Modal

This section shows how easy it is to use modals.

The modal component consists of an overlay, a dialog and a close button.

Class Description
<.uk-modal> Add this class to a <div> element to create the dialog container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling.
<.uk-modal-dialog> Add this class to a child <div> element to create the dialog box.
<.uk-modal-close> Add this class to an <a> or <button> element to create a close button within the dialog box. We recommend adding the .uk-close class from the Close component to give the button a proper styling, though you can also use text or an image.

You can use any element to toggle a modal dialog. An <a> element needs to be linked to the modal's id. To enable the necessary JavaScript, add the data-uk-modal attribute. If you are using another element, like a button, just add the data-uk-modal="{target:'#ID'}" attribute to target the modal's id.

Open

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is a button toggling the modal -->
<button class="button" data-uk-modal="{target:'#my-id'}">...</button>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>

NOTEYou can find more details and options about the modals here.

Lightbox

This section shows how easy it is to create a fancy lightbox for images and videos.

To apply this component, add the data-uk-lightbox attribute to an anchor linking to the image you wish to display. If a title attribute exists it will be displayed as a caption for the lightbox.

Open lightbox

<a href="/my-image.jpg" data-uk-lightbox title="">...</a>

You can link multiple images to the same lightbox and switch between them from within the lightbox, thus creating a gallery. Just add the {group:'my-group'} option to the data attribute of each item using the same name on all items that you want to group.

<a href="/" data-uk-lightbox="{group:'my-group'}">...</a>

A lightbox is not restricted to images. Other media, like videos, can be displayed inside a lightbox and it will automatically generate the correct output by evaluating your path.

Image MP4 Vimeo YouTube

NOTEYou can find more details and options about the lightbox here.

Tooltip

This section shows how easy it is to create a nicely looking tooltip.

To create a tooltip, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.

Hover me

<button class="button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

Add one of the following options to the data-uk-tooltip attribute to adjust the tooltip's alignment.

Attribute Description Example
<pos:'top'> Aligns the tooltip to the top.
<pos:'top-left'> Aligns the tooltip to the top left.
<pos:'top-right'> Aligns the tooltip to the top right.
<pos:'bottom'> Aligns the tooltip to the bottom.
<pos:'bottom-left'> Aligns the tooltip to the bottom left.
<pos:'bottom-right'> Aligns the tooltip to the bottom right.
<pos:'left'> Aligns the tooltip to the left.
<pos:'right'> Aligns the tooltip to the right.

<button class="button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

NOTEYou can find more details about the tooltip here.

Tabs

This section shows how easy it is to create a tabbed navigation with different styles.

The Tab component consists of clickable tabs, that are aligned side by side.

Class Description
.uk-tab Add this class to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.uk-active Add this class to a list item to apply an active state.
.uk-disabled Add this class to a list item to apply a disabled state.

The data-uk-tab attribute is required for two purposes. Firstly, it enables the responsive behaviour. If the parent container is too small to accomodate all tabs, they will be combined into a dropdown, toggled by a single tab, which represents the active tab item.

And secondly, its functionality is coupled to the Switcher component, which is necessary to dynamically transition through different contents using tabbed navigation.

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li class="uk-disabled"><a href="#">...</a></li>
</ul>

There are many more options and layouts available for the tabs, for example centered tabs, tabs on the left, tabs on the right, etc. You will find all these details on the UIkit website.

NOTEYou can find more details and options about the lightbox here.

Accordions

This section shows how easy it is to create a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

To create an Accrodion, add the uk-accordion class and the data-uk-accordion attribute to a container element. Add the uk-accordion-content class to each of the content sections within the container. Finally, add the uk-accordion-title class to any element, like a heading, above the content section to create a toggle.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

</div>

NOTEYou can find more details and options about the accordion here.

UIkit

The things you see here, in the Typography page, are just a quick overview of the most commonly used elements. There are actually many, many more cool things that you can use, like Utility classes, Overlays, Text Styles, Switchers, Toggles, Scrollspy, Smooth scroll, Dynamic Grids, Sliders, Slidesets, Slideshows, Parallax, Sticky elements and more!

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It comes with a wide range of reusable and combinable components. All UIkit classes are namespaced, so they won't interfere with other frameworks and extensions you might be using.