Content Manager Documentation

This documentation showcases each component and the varieties that it’s able to achieve. Every component has its settings (colours, themes, font size, etc) that could be adjusted according to your needs.

P.S. Any theme that are not mentioned in this documentation is currently unused, unless they’re needed for future improvements. Choosing these themes won’t break the page - just produces plain style.

components.png

Banners

Content blocks

Contentblock Theme 1

All content items are aligned to the top vertically.
This column content alignment is set to left.
This column paragraphs use small text size and primary text color.

また、欧米の国際規格に準じた製品をいち早く日本のお客様にご紹介し、最適なソリューションを提供することを使命としています。

On mobile view, the layout becomes responsive by stacking the columns vertically — placing the image column on top, followed by the text + multiple content column.

xlogo_bk_250px.png
xnoise_logger_800x800.png

Contentblock - 2-Column Layout (Theme 2)

All content items are vertically centered.

This column content alignment is set to Left.
This column paragraphs use medium text size and the primary color.

Contentblock Theme 2

All content items are vertically centered.

Content alignment is set to center.
Horizontal alignment can be set Left, Center, Right.

xknowledgebase_aabr_1.jpg

Contentblock Theme 2

Theme 2 (layouts 3, 4, and 5): Columns are spaced closely together with a small gap between each content item.

xknowledgebase_aabr_2.jpg

Images are automatically resized to fit their column, no padding. Followed by text or buttons, a 2.5 rem gap is added between them.

xmb11-beraphone_pass_800x800.png

Text blocks occupy 80% of the column width.

xmaicoeasyscreen17printsnapprobesmall.png

Contentblock - 2-Column Layout (Theme 3)

The container width adapts to the content.
Buttons inside text columns have extra spacing above them.

The first and second columns get extra side padding for balanced spacing:

  • Left column → more left padding
  • Right column → more right padding

Contentblock - 2-Column Layout (Theme 3)

The container width adapts to the content.
Buttons inside text columns have extra spacing above them.

The first and second columns get extra side padding for balanced spacing:

  • Left column → more left padding
  • Right column → more right padding
xmaicoeasyscreen17printsnapprobesmall.png

(↑ 4rem top)

Theme 4 for content blocks uses a full-height, evenly stretched layout with responsive spacing — tighter on mobile and roomier on larger screens.

(↓ 4.8rem bottom)

(↑ 4rem top)

Theme 4 for content blocks uses a full-height, evenly stretched layout with responsive spacing — tighter on mobile and roomier on larger screens.

(↓ 4.8rem bottom)

Buttons

Typography

And this is how a regular paragraph looks like. You can also adjust the sizing and the colors too, just like the heading ones.
そして、これが通常の段落の見た目です。見出しと同様に、サイズや色も調整できます。
Und so sieht ein normaler Absatz aus. Sie können auch die Größe und die Farben anpassen, genau wie bei den Überschriften.

This is extra small size, accent color
世界、こんにちは
Streichholzschächtelchen

This is small size, primary color
世界、こんにちは
Streichholzschächtelchen

This is medium size, secondary color
世界、こんにちは
Streichholzschächtelchen

This is large size, accent color
世界、こんにちは
Streichholzschächtelchen

This is extra large size, primary color
世界、こんにちは
Streichholzschächtelchen

Heading

MB11 ベラフォン(BERAphone®)による自動 ABR検査:ヘッドホン一体型電極

Verkaufsberatung

Durch unsere langjährige Erfahrung und unser breites Produkt-Portfolio von klassischen Audiometern über Schwindeldiagnostik bis hin zu Datenbanken finden wir für Sie die passende Lösung. Wir vertreiben nachfolgende Marken:

Diatec offers a complete range of audiological and balance solutions

Being an authorized dealer of several leading diagnostic brands, you only have to look one place to find the instrument that suits your needs. Based on many years of experience in the industry, we can help you find the instrument that that fits your needs.

Do you have any questions?

Contact with us by filling form below

Heading - Theme 2

I have smaller padding

Textblock

Default Theme 1

Testing text in textblock

  • List 1
  • List 2
  • List 3
  1. Numbered list 1
  2. Numbered list 2
  3. Numbered list 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt laoreet mattis. Morbi cursus tellus eu lorem lacinia, eu lobortis neque eleifend. Etiam in sapien quis massa lobortis ornare sit amet sit amet lectus.

Text in span?

Nullam at sagittis diam. Phasellus rhoncus urna non orci maximus, eget egestas ipsum hendrerit

Donec mattis congue nunc vestibulum volutpat. Donec fringilla, nisl ac ullamcorper hendrerit, est dolor scelerisque diam, eu faucibus arcu odio fermentum tortor.

(↑ 2rem top)

Textblock - Theme 2

90% in width.
Text aligned center.

Heading H3

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.

(↓ 2rem bottom)

(↑ 1rem top)

Text Block - Theme 3

Has smaller top padding.
Has bigger bottom padding.
Big space between headings and paragraph.

Heading H1

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.

Heading H2

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.

Heading H3

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.

Heading H4

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.

(↓ 4rem bottom)

Accordion

Das modulare Design, die erweiterten Testfunktionen und die benutzerfreundliche Touch-Tastatur des Equinox Evo heben es von anderen Audiometern ab. Es ist darauf ausgelegt, genaue und zuverlässige Ergebnisse zu liefern, Ablenkungen zu minimieren und den Testprozess zu vereinfachen.

Ja, die benutzerfreundliche Software und nahtlose Datenintegration des Equinox Evo machen es einfach, es in Ihren bestehenden Arbeitsablauf zu integrieren und sorgen für einen reibungslosen Übergang.

Das Equinox Evo bietet nahtlose Datenintegration, was die Analyse und Berichterstellung von Testergebnissen erleichtert. Dies stellt sicher, dass Sie alle benötigten Informationen zur Hand haben, was die Effizienz und Genauigkeit in Ihrem Arbeitsalltag verbessert.

Carousel

Gallery

Video Embed

Article Cards Section (for Blogs)

Product Cards Section

Forms - Theme 1

Forms - Theme 2

❗Achtung

❗Achtung

Documentation page