Details

Ready

HTML
View
Context
Info
Notes


        
        
            <!-- Default -->
<p><strong>Details example with <code>summary</code> containing only text and no child element.</strong> Sample text before: Sumo advoco ventito vesper nostrum optio cuppedia. Creator vix id verumtamen vulgo demitto coadunatio adipisci arguo. Tui tabesco cupiditate odit ducimus.
    Solus volo accendo audio. Tenax crudelis tactus civitas. Aperio allatus acies attollo.
    Totam aeneus cognatus nemo tricesimus decerno surgo sustineo temeritas. Attonbitus custodia bibo vapulus a qui. Audax fuga appono vester admoveo molestias alter sordeo.</p>
<details>
    <summary>Pel adulatio damnatio.</summary>
    <p>Stabilis cohibeo cetera. Facilis cupressus cogito contego animadverto. Apostolus comis cedo cupiditate deficio. Volubilis cogo cum desipio thorax voluptates. Veritas ciminatio solvo conspergo vito incidunt vitae. Vox vomer nam vox aureus convoco atavus cunae abeo vinitor. Voluptas varietas utrum amaritudo adeo. Ascit audeo succedo hic et. Calamitas carmen molestias placeat magnam ullus truculenter. Cunabula canonicus tenetur adhuc theca triduana brevis. Cognomen magni celo caste sint voluntarius desidero. Caritas bonus titulus cavus tertius numquam atrocitas volup. Universe subvenio cras sint officia. Paens bis studio spargo vos. Consequatur apostolus deripio voluptates trans autus demulceo defaeco uberrime coruscus. Nihil cerno acceptus spiculum conqueror deprecator assentator. Adsum ea vinitor acies odit voro. Aro vergo stips velum. Spargo volup tamquam. Subseco adaugeo derideo deludo.</p>
</details>
<p>Sample text after <code>details</code> element: Vindico curriculum beneficium eveniet universe alo argentum artificiose vinculum. Centum subvenio somniculosus peccatus angustus vere convoco conforto nostrum. Comparo vitium coruscus torqueo statua.
    Quas turpis caput umquam colo clamo. Thema animi agnitio voluptatum sui illum. Aestus volutabrum vulariter video arbitro annus textilis aurum.
    Amet strenuus abutor numquam charisma quidem denuo repellat adversus tumultus. Sum tabula abstergo aequitas centum ulciscor. Adaugeo amplitudo sumo.</p>


        
            <!-- 2 -->
<p><strong>Details example with <code>summary</code> containing text within a <code>h4</code> child element.</strong> Sample text before: Sumo advoco ventito vesper nostrum optio cuppedia. Creator vix id verumtamen vulgo demitto coadunatio adipisci arguo. Tui tabesco cupiditate odit ducimus.
    Solus volo accendo audio. Tenax crudelis tactus civitas. Aperio allatus acies attollo.
    Totam aeneus cognatus nemo tricesimus decerno surgo sustineo temeritas. Attonbitus custodia bibo vapulus a qui. Audax fuga appono vester admoveo molestias alter sordeo.</p>
<details>
    <summary>
        <h2>Pel adulatio damnatio.</h2>
    </summary>
    <p>Stabilis cohibeo cetera. Facilis cupressus cogito contego animadverto. Apostolus comis cedo cupiditate deficio. Volubilis cogo cum desipio thorax voluptates. Veritas ciminatio solvo conspergo vito incidunt vitae. Vox vomer nam vox aureus convoco atavus cunae abeo vinitor. Voluptas varietas utrum amaritudo adeo. Ascit audeo succedo hic et. Calamitas carmen molestias placeat magnam ullus truculenter. Cunabula canonicus tenetur adhuc theca triduana brevis. Cognomen magni celo caste sint voluntarius desidero. Caritas bonus titulus cavus tertius numquam atrocitas volup. Universe subvenio cras sint officia. Paens bis studio spargo vos. Consequatur apostolus deripio voluptates trans autus demulceo defaeco uberrime coruscus. Nihil cerno acceptus spiculum conqueror deprecator assentator. Adsum ea vinitor acies odit voro. Aro vergo stips velum. Spargo volup tamquam. Subseco adaugeo derideo deludo.</p>
</details>
<p>Sample text after <code>details</code> element: Vindico curriculum beneficium eveniet universe alo argentum artificiose vinculum. Centum subvenio somniculosus peccatus angustus vere convoco conforto nostrum. Comparo vitium coruscus torqueo statua.
    Quas turpis caput umquam colo clamo. Thema animi agnitio voluptatum sui illum. Aestus volutabrum vulariter video arbitro annus textilis aurum.
    Amet strenuus abutor numquam charisma quidem denuo repellat adversus tumultus. Sum tabula abstergo aequitas centum ulciscor. Adaugeo amplitudo sumo.</p>


        <!-- Default -->
<p><strong>Details example with <code>summary</code> containing only text and no child element.</strong> Sample text before: {{ details.text_before }}</p>
<details>
  <summary>{{ details.summary }}</summary>
  <p>{{ details.text }}</p>
</details>
<p>Sample text after <code>details</code> element: {{ details.text_after }}</p>

<!-- 2 -->
<p><strong>Details example with <code>summary</code> containing text within a <code>h4</code> child element.</strong> Sample text before: {{ details.text_before }}</p>
<details>
  <summary><h2>{{ details.summary }}</h2></summary>
  <p>{{ details.text }}</p>
</details>
<p>Sample text after <code>details</code> element: {{ details.text_after }}</p>


        
        
            /* Default */
{
  "details": {
    "summary": "Pel adulatio damnatio.",
    "text": "Stabilis cohibeo cetera. Facilis cupressus cogito contego animadverto. Apostolus comis cedo cupiditate deficio. Volubilis cogo cum desipio thorax voluptates. Veritas ciminatio solvo conspergo vito incidunt vitae. Vox vomer nam vox aureus convoco atavus cunae abeo vinitor. Voluptas varietas utrum amaritudo adeo. Ascit audeo succedo hic et. Calamitas carmen molestias placeat magnam ullus truculenter. Cunabula canonicus tenetur adhuc theca triduana brevis. Cognomen magni celo caste sint voluntarius desidero. Caritas bonus titulus cavus tertius numquam atrocitas volup. Universe subvenio cras sint officia. Paens bis studio spargo vos. Consequatur apostolus deripio voluptates trans autus demulceo defaeco uberrime coruscus. Nihil cerno acceptus spiculum conqueror deprecator assentator. Adsum ea vinitor acies odit voro. Aro vergo stips velum. Spargo volup tamquam. Subseco adaugeo derideo deludo.",
    "text_before": "Sumo advoco ventito vesper nostrum optio cuppedia. Creator vix id verumtamen vulgo demitto coadunatio adipisci arguo. Tui tabesco cupiditate odit ducimus.\nSolus volo accendo audio. Tenax crudelis tactus civitas. Aperio allatus acies attollo.\nTotam aeneus cognatus nemo tricesimus decerno surgo sustineo temeritas. Attonbitus custodia bibo vapulus a qui. Audax fuga appono vester admoveo molestias alter sordeo.",
    "text_after": "Vindico curriculum beneficium eveniet universe alo argentum artificiose vinculum. Centum subvenio somniculosus peccatus angustus vere convoco conforto nostrum. Comparo vitium coruscus torqueo statua.\nQuas turpis caput umquam colo clamo. Thema animi agnitio voluptatum sui illum. Aestus volutabrum vulariter video arbitro annus textilis aurum.\nAmet strenuus abutor numquam charisma quidem denuo repellat adversus tumultus. Sum tabula abstergo aequitas centum ulciscor. Adaugeo amplitudo sumo."
  }
}


        
            /* 2 */
{
  "details": {
    "summary": "Pel adulatio damnatio.",
    "text": "Stabilis cohibeo cetera. Facilis cupressus cogito contego animadverto. Apostolus comis cedo cupiditate deficio. Volubilis cogo cum desipio thorax voluptates. Veritas ciminatio solvo conspergo vito incidunt vitae. Vox vomer nam vox aureus convoco atavus cunae abeo vinitor. Voluptas varietas utrum amaritudo adeo. Ascit audeo succedo hic et. Calamitas carmen molestias placeat magnam ullus truculenter. Cunabula canonicus tenetur adhuc theca triduana brevis. Cognomen magni celo caste sint voluntarius desidero. Caritas bonus titulus cavus tertius numquam atrocitas volup. Universe subvenio cras sint officia. Paens bis studio spargo vos. Consequatur apostolus deripio voluptates trans autus demulceo defaeco uberrime coruscus. Nihil cerno acceptus spiculum conqueror deprecator assentator. Adsum ea vinitor acies odit voro. Aro vergo stips velum. Spargo volup tamquam. Subseco adaugeo derideo deludo.",
    "text_before": "Sumo advoco ventito vesper nostrum optio cuppedia. Creator vix id verumtamen vulgo demitto coadunatio adipisci arguo. Tui tabesco cupiditate odit ducimus.\nSolus volo accendo audio. Tenax crudelis tactus civitas. Aperio allatus acies attollo.\nTotam aeneus cognatus nemo tricesimus decerno surgo sustineo temeritas. Attonbitus custodia bibo vapulus a qui. Audax fuga appono vester admoveo molestias alter sordeo.",
    "text_after": "Vindico curriculum beneficium eveniet universe alo argentum artificiose vinculum. Centum subvenio somniculosus peccatus angustus vere convoco conforto nostrum. Comparo vitium coruscus torqueo statua.\nQuas turpis caput umquam colo clamo. Thema animi agnitio voluptatum sui illum. Aestus volutabrum vulariter video arbitro annus textilis aurum.\nAmet strenuus abutor numquam charisma quidem denuo repellat adversus tumultus. Sum tabula abstergo aequitas centum ulciscor. Adaugeo amplitudo sumo."
  }
}

Handle: @details
Variants (2): Default , 2
Preview:
- With layout
- Component only
Filesystem Path: elements/4-objects/details.hbs

A child element, like <p>, must wrap the content within the parent <details> element in order for block margin to render around the content.