KSS Style Guide

8 #permalink FAQ - sekcja z pytaniami i odpowiedziami

Toggle example guides Toggle HTML markup

Sekcja "FAQ - Często Zadawane Pytania"

  1. main: Główny kontener sekcji FAQ, elastyczny wewnątrz głównego kontenera strony (flex: 1). Umieszczony jest nieco wyżej na stronie (160 pikseli od góry) i ma margines na dole wynoszący 100 pikseli.

  2. #faq-section: Główny kontener sekcji FAQ oznaczony identyfikatorem. Ma wewnętrzne odstępy 20 pikseli i używa czcionki Arial lub sans-serif.

  3. .faq-category h2: Styl dla nagłówków kategorii pytań w sekcji FAQ. Nagłówki te mają margines na górze wynoszący 30 pikseli, co oddziela je od innych elementów.

  4. .faq-item: Styl dla pojedynczych pozycji FAQ. Mają białe tło, niewielki margines na dole, subtelne obramowanie o grubości 1 piksela i zaokrąglone rogi.

  5. .faq-question: Styl dla pytań w sekcji FAQ. Pytania mają tło o kolorze, białą czcionkę, zmieniony kursor na wskaźnik ręki (do wskazywania) oraz ikonę przed pytaniem w kolorze białym.

  6. .faq-answer: Styl dla odpowiedzi na pytania. Mają odstęp wewnętrzny wynoszący 15 pikseli i brak marginesów.

  7. details[open] .faq-question: Ten selektor dotyczy pytań, które są rozwinięte (czyli otwarte). W takim przypadku pytania otrzymują dolne obramowanie o grubości 1 piksela w szarym kolorze.

  8. details:not([open]) .faq-answer: Ten selektor dotyczy odpowiedzi na pytania, które są złożone (czyli zamknięte). W takim przypadku odpowiedzi są ukrywane.

  9. details > summary: Ten selektor dotyczy elementów <summary> w kontenerach <details>. Usunięto domyślny marker przed tekstem summary.

  10. details > summary::-webkit-details-marker: Ten selektor ukrywa domyślny marker w przeglądarkach opartych na silniku WebKit (np. Chrome, Safari).

  11. HTML Markup: Kod HTML zawiera sekcję FAQ z pytaniami i odpowiedziami. Nagłówek h1 informuje, że to często zadawane pytania. Pytania są podzielone na kategorie (np. "General Questions") i każde pytanie jest zawarte w elemencie <details>, który pozwala na ich rozwinięcie lub złożenie. Pytania są wyświetlane jako nagłówki <summary>, a odpowiedzi jako paragrafy <p>. Dla każdego pytania i odpowiedzi zastosowano odpowiednie klasy CSS.

Example

Frequently Asked Questions

General Questions

Can I order a product to an address different from my home?

Yes, you can specify an alternative delivery address during the checkout process.

Does your offer include a warranty?

Yes, all our products come with a standard manufacturer's warranty.

Is free shipping available?

Free shipping is available for orders above a certain value.

How can I track my order?

After your order has been shipped, you will receive a tracking number that allows you to track your package online.

Can I change my order after placing it?

Order changes are possible only for a short time after the order is placed.

What payment methods do you accept?

We accept credit cards, bank transfers, and electronic payments.

Can I receive a VAT invoice?

Yes, a VAT invoice will be sent by email or included with your package upon request.

Do you offer technical support?

We offer technical support for all of our products.

Can I place an order over the phone?

Yes, our team is available to take phone orders during business hours.

Are products available in different colors?

Yes, most products are available in multiple colors, which you can select before adding to the cart.

Can I return a product if I don't like it?

Yes, we accept returns within a specified period provided the product has not been used.

Can I cancel my order?

Yes, orders can be canceled if they have not yet been shipped.

How can I update my contact details?

You can update your contact information in the 'My Account' section on our website.

Do you offer discounts for regular customers?

Yes, we have a loyalty program for our returning customers.

Where can I find product reviews?

Customer reviews of the product can be found on the product page under the description.

Markup 
<main id="faq-section">
        <h1>Frequently Asked Questions</h1>
        <section class="faq-category">
            <h2>General Questions</h2>
            <details class="faq-item">
                <summary class="faq-question">Can I order a product to an address different from my home?</summary>
                <p class="faq-answer">Yes, you can specify an alternative delivery address during the checkout process.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Does your offer include a warranty?</summary>
                <p class="faq-answer">Yes, all our products come with a standard manufacturer's warranty.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Is free shipping available?</summary>
                <p class="faq-answer">Free shipping is available for orders above a certain value.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">How can I track my order?</summary>
                <p class="faq-answer">After your order has been shipped, you will receive a tracking number that allows you to track your package online.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Can I change my order after placing it?</summary>
                <p class="faq-answer">Order changes are possible only for a short time after the order is placed.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">What payment methods do you accept?</summary>
                <p class="faq-answer">We accept credit cards, bank transfers, and electronic payments.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Can I receive a VAT invoice?</summary>
                <p class="faq-answer">Yes, a VAT invoice will be sent by email or included with your package upon request.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Do you offer technical support?</summary>
                <p class="faq-answer">We offer technical support for all of our products.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Can I place an order over the phone?</summary>
                <p class="faq-answer">Yes, our team is available to take phone orders during business hours.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Are products available in different colors?</summary>
                <p class="faq-answer">Yes, most products are available in multiple colors, which you can select before adding to the cart.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Can I return a product if I don't like it?</summary>
                <p class="faq-answer">Yes, we accept returns within a specified period provided the product has not been used.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Can I cancel my order?</summary>
                <p class="faq-answer">Yes, orders can be canceled if they have not yet been shipped.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">How can I update my contact details?</summary>
                <p class="faq-answer">You can update your contact information in the 'My Account' section on our website.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Do you offer discounts for regular customers?</summary>
                <p class="faq-answer">Yes, we have a loyalty program for our returning customers.</p>
            </details>
            <details class="faq-item">
                <summary class="faq-question">Where can I find product reviews?</summary>
                <p class="faq-answer">Customer reviews of the product can be found on the product page under the description.</p>
            </details>
        </section>
</main>
Source: styleFaq.css, line 592