代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<title>Components</title>
<script id="adobe_dtm" src="https://www.redhat.com/dtm.js" type="text/javascript"></script>
<script src="/assets/javascript/highlight.pack.js" type="text/javascript"></script>
<META HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'none'; script-src 'self' 'unsafe-eval' 'sha256-ANpuoVzuSex6VhqpYgsG25OHWVA1I+F6aGU04LoI+5s=' 'sha256-ipy9P/3rZZW06mTLAR0EnXvxSNcnfSDPLDuh3kzbB1w=' js.bizographics.com https://www.redhat.com assets.adobedtm.com jsonip.com https://ajax.googleapis.com https://www.googletagmanager.com https://www.google-analytics.com https://use.fontawesome.com; style-src 'self' https://fonts.googleapis.com https://use.fontawesome.com; img-src 'self' *; media-src 'self' ; frame-src https://www.googletagmanager.com https://www.youtube.com; frame-ancestors 'none'; base-uri 'none'; object-src 'none'; form-action 'none'; font-src 'self' https://use.fontawesome.com https://fonts.gstatic.com;">
<META HTTP-EQUIV='X-Frame-Options' CONTENT="DENY">
<META HTTP-EQUIV='X-XSS-Protection' CONTENT="1; mode=block">
<META HTTP-EQUIV='X-Content-Type-Options' CONTENT="nosniff">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Quarkus: Supersonic Subatomic Java">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@QuarkusIO">
<meta name="twitter:creator" content="@QuarkusIO">
<meta property="og:url" content="https://quarkus.io/components.html" />
<meta property="og:title" content="Components" />
<meta property="og:description" content="Quarkus: Supersonic Subatomic Java" />
<meta property="og:image" content="/assets/images/quarkus_card.png" />
<link rel="canonical" href="https://quarkus.io/components.html">
<link rel="shortcut icon" type="image/png" href="/favicon.ico" >
<link rel="stylesheet" href="https://quarkus.io/guides/stylesheet/config.css" />
<link rel="stylesheet" href="/assets/css/main.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="alternate" type="application/rss+xml" href="https://quarkus.io/feed.xml" title="Quarkus">
<script src="https://quarkus.io/assets/javascript/goan.js" type="text/javascript"></script>
<script src="https://quarkus.io/assets/javascript/hl.js" type="text/javascript"></script>
</head>
<body class="components">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NJWS5L"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="nav-wrapper">
<div class="grid-wrapper">
<div class="width-12-12">
<input type="checkbox" id="checkbox" />
<nav id="main-nav" class="main-nav">
<div class="container">
<div class="logo-wrapper">
<a href="/"><img src="/assets/images/quarkus_logo_horizontal_rgb_600px_reverse.png" class="project-logo" title="Quarkus"></a>
</div>
<label class="nav-toggle" for="checkbox">
<i class="fa fa-bars"></i>
</label>
<div id="menu" class="menu">
<span>
<a href="/get-started/" class="">Get Started</a>
</span>
<span>
<a href="/guides/" class="">Guides</a>
</span>
<span>
<a href="/community/" class="">Community</a>
</span>
<span>
<a href="/support/" class="">Support</a>
</span>
<span>
<a href="/blog/" class="">Blog</a>
</span>
<span>
<a href="https://code.quarkus.io" class="button-cta secondary white">Start Coding</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="content">
<div class="grid-wrapper">
<div class="width-12-12">
<h1>Component Library</h1>
<br/><br/><br/>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Typography</h5></div>
<div class="width-12-12">
<h1>H1 Looks like this</h1>
<h2>H2 Looks like this</h2>
<h3>H3 Looks like this</h3>
<h4>H4 Looks like this</h4>
<h5>H5 Looks like this</h5>
<h6>H6 Looks like this</h6>
<p>P Looks like this</p>
<a href="#">Links look like this</a>
<br/><br/><br/>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Basic HTML Elements</h5></div>
<div class="width-12-12">
<h5>Table Example</h5>
<table>
<tr>
<th>First</th>
<th>Last</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>7452 Hello World</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>7452 Hello World</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>7452 Hello World</td>
</tr>
</table>
<br><br><br>
<h5>Pre Tag</h5>
<pre class="highlight">Here's a very long pre element formatted using the <pre> tag. Notice how it wraps? It goes on and on and on and on and on and on and on and on and on and on...</pre>
<br><br>
<h5>Code Tag</h5>
Here's an example demonstrating the <code><code></code> tag.
<br><br><br>
<h5>Marked / Highlighted text</h5>
Here's an example demonstrating the <mark><mark></mark> tag.
<br><br><br>
<h5>Block Quotes</h5>
<blockquote>All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote. All of this text will be in a blockquote.</blockquote>
<br>
<h5>Short Quotes</h5>
<q>This is a short quote.</q>
<br><br><br><br>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Secondary Page Title Band</h5></div>
</div>
<div class="component-wrapper secondary-page-title-band">
<div class="width-12-12">
<h1>Secondary page title</h1>
<h3>This project relies on contributions from people like you. Here are some ways you can help out today!</h3>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Download Announcement Band</h5></div>
</div>
<div class="component-wrapper download-announcement-band">
<div class="width-12-12">
<h1>The new version is here!</h1>
<div class="ctas">
<a href="#" class="button-cta" target="_blank">Primary CTA</a>
<a href="#" class="button-cta secondary" target="_blank">Secondary CTA</a>
</div>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Header Navigation</h5></div>
</div>
<div class="nav-wrapper">
<div class="grid-wrapper">
<div class="width-12-12">
<input type="checkbox" id="checkbox" />
<nav id="main-nav" class="main-nav">
<div class="container">
<div class="logo-wrapper">
<a href="/"><img src="/assets/images/quarkus_logo_horizontal_rgb_600px_reverse.png" class="project-logo" title="Quarkus"></a>
</div>
<label class="nav-toggle" for="checkbox">
<i class="fa fa-bars"></i>
</label>
<div id="menu" class="menu">
<span>
<a href="/get-started/" class="">Get Started</a>
</span>
<span>
<a href="/guides/" class="">Guides</a>
</span>
<span>
<a href="/community/" class="">Community</a>
</span>
<span>
<a href="/support/" class="">Support</a>
</span>
<span>
<a href="/blog/" class="">Blog</a>
</span>
<span>
<a href="https://code.quarkus.io" class="button-cta secondary white">Start Coding</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Product Download Band</h5></div>
</div>
<div class="component-wrapper product-download-band">
<div class="width-12-12">
<h4>Lorem ipsum dolor sit amet, an congue putant voluptatum eam, mei id dolorum neglegentur. Laudem ancillae quo eu, nulla veniam possit in eos, nec te harum inermis molestiae. Has te assum electram. Vero vidit has ex. Nec assum error nostrum at, nec an vitae consul probatus. Id cum torquatos theophrastus, eos at eirmod nonumes. Eos luptatum euripidis id, iriure fabulas intellegat sit an. An doctus ornatus ancillae nam, an velit constituam has. Pro malis maiestatis philosophia at, nostrud delicatissimi at vix. Ad mel summo sadipscing.</h4>
<div class="ctas">
<a href="#" class="button-cta secondary" target="_blank">Secondary CTA</a>
<a href="#" class="button-cta secondary" target="_blank">Secondary CTA</a>
<a href="#" class="button-cta secondary" target="_blank">Secondary CTA</a>
</div>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Quick Pitch Band</h5></div>
</div>
<div class="component-wrapper quick-pitch-band">
<div class="width-12-12">
<h2>Lorem ipsum dolor sit amet</h2>
<img src="/assets/images/placeholder.png">
<h3>Lorem ipsum dolor sit amet, no posse consectetuer nec, quo maiorum adversarium consectetuer no, ex antiopam constituam pri. Ea ullum cotidieque eloquentiam pro, diam blandit voluptatibus ei ius, eu has magna tantas perfecto. Te timeam epicuri reprehendunt eum. Ea mea porro intellegebat, vim an tota summo errem.</h3>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Two Column Content Band</h5></div>
</div>
<div class="component-wrapper two-column-content-band">
<div class="width-12-12">
<h2>Title of this content</h2>
<p class="two-columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec ligula porta, hendrerit massa eget, tempus libero. Integer rutrum condimentum faucibus. Cras odio tellus, facilisis a feugiat eget, iaculis in erat. Etiam pretium et purus non vulputate. Nullam viverra magna risus, eu volutpat orci venenatis a. Nulla tincidunt ut quam eget scelerisque. Proin nec nibh sagittis, efficitur tellus et, dictum sem. Morbi molestie erat ac sem pharetra, et pellentesque libero consequat. Sed feugiat tortor sit amet luctus vehicula. In hac habitasse platea dictumst. Praesent lacinia sem ac rutrum aliquam. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aenean aliquam, felis eget feugiat sodales, turpis orci finibus nisi, in ultricies ligula nulla et lorem. Morbi posuere lacinia dui sed pretium. Donec a tincidunt ante, eu egestas lorem. Proin maximus sagittis leo, eget accumsan velit auctor in. Mauris non nulla dui. Suspendisse eu facilisis ligula, in pulvinar nisi. Vivamus rhoncus, risus a ultricies scelerisque, turpis quam dignissim velit, sit amet rhoncus leo orci sed lectus. Pellentesque tincidunt eget dui a vulputate. Mauris rutrum ligula quis nisi faucibus eleifend. Morbi vitae cursus neque. Donec ullamcorper elementum lacus. Ut volutpat ligula non molestie congue. Praesent eu congue nibh. Phasellus id arcu blandit sapien ultrices euismod. Ut ullamcorper non leo quis tempor.</p>
</div>
<div class="width-12-12">
<h2>Title of this content</h2>
<div class="grid-wrapper">
<div class="width-6-12 width-12-12-m">
<img src="/assets/images/placeholder.png">
</div>
<div class="width-6-12 width-12-12-m">
<p class="img-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec ligula porta, hendrerit massa eget, tempus libero. Integer rutrum condimentum faucibus. Cras odio tellus, facilisis a feugiat eget, iaculis in erat. Etiam pretium et purus non vulputate. Nullam viverra magna risus, eu volutpat orci venenatis a. Nulla tincidunt ut quam eget scelerisque. Proin nec nibh sagittis, efficitur tellus et, dictum sem. Morbi molestie erat ac sem pharetra, et pellentesque libero consequat. Sed feugiat tortor sit amet luctus vehicula. In hac habitasse platea dictumst. Praesent lacinia sem ac rutrum aliquam. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<div class="width-12-12">
<h2>Title of this content</h2>
<div class="grid-wrapper">
<div class="width-6-12 width-12-12-m">
<p class="img-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec ligula porta, hendrerit massa eget, tempus libero. Integer rutrum condimentum faucibus. Cras odio tellus, facilisis a feugiat eget, iaculis in erat. Etiam pretium et purus non vulputate. Nullam viverra magna risus, eu volutpat orci venenatis a. Nulla tincidunt ut quam eget scelerisque. Proin nec nibh sagittis, efficitur tellus et, dictum sem. Morbi molestie erat ac sem pharetra, et pellentesque libero consequat. Sed feugiat tortor sit amet luctus vehicula. In hac habitasse platea dictumst. Praesent lacinia sem ac rutrum aliquam. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst. Aliquam imperdiet dui gravida ipsum sagittis hendrerit. Donec fringilla risus at lacus iaculis bibendum. In hac habitasse platea dictumst.</p>
</div>
<div class="width-6-12 width-12-12-m">
<img src="/assets/images/placeholder.png">
</div>
</div>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Mid-Page CTA Band</h5></div>
</div>
<div class="component-wrapper mid-page-cta-band">
<div class="width-6-12 width-12-12-m">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut eros turpis.</h3>
</div>
<div class="width-6-12 cta width-12-12-m">
<a href="#" class="button-cta secondary">Secondary CTA</a>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Documentation Archive Sub-navigation</h5></div>
</div>
<div class="component-wrapper docs-archive-subnav">
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
<div class="width-2-12 width-6-12-m version-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<div class="img-caption">Version</div>
</a>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Contributions Band</h5></div>
</div>
<div class="component-wrapper contributions-band">
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
<div class="width-3-12 width-6-12-m contrib-block">
<img src="/assets/images/square-placeholder.png">
<h4>Contribute somehow</h4>
<p>Proin a rutrum quam, quis congue dui. Aenean non arcu vehicula, blandit massa quis, sagittis mauris.</p>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Big Three Sub-navigation Band</h5></div>
</div>
<div class="component-wrapper big-three-subnav-band">
<div class="width-4-12 width-12-12-m big-three-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<h3>Option One</h3>
</a>
</div>
<div class="width-4-12 width-12-12-m big-three-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<h3>Option Two</h3>
</a>
</div>
<div class="width-4-12 width-12-12-m big-three-block">
<a href="#">
<img src="/assets/images/square-placeholder.png">
<h3>Option Three</h3>
</a>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Video Content Band</h5></div>
</div>
<div class="component-wrapper video-content-band">
<div class="width-12-12 video-container">
<iframe src="https://www.youtube.com/embed/Ob_jpoWRCwg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="component-wrapper video-content-band">
<div class="width-6-12 width-12-12-m video-container">
<iframe src="https://www.youtube.com/embed/Ob_jpoWRCwg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="width-6-12 width-12-12-m">
<h3>Video Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut eros turpis. Nam nec maximus dui. Vestibulum scelerisque gravida pellentesque. Suspendisse porta condimentum lectus eu feugiat. Duis leo nulla, ultricies sit amet tellus vel, molestie mattis nibh. Mauris varius sed ex eget elementum. Donec nunc diam, vehicula sed ipsum nec, pellentesque aliquet velit. Nulla facilisi. Mauris pretium dignissim diam, in congue nibh vestibulum eu. Aliquam id justo at tellus rhoncus maximus. Phasellus efficitur turpis magna, nec tempus quam sagittis et.</p>
</div>
</div>
<div class="component-wrapper video-content-band">
<div class="width-6-12 width-12-12-m">
<h3>Video Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut eros turpis. Nam nec maximus dui. Vestibulum scelerisque gravida pellentesque. Suspendisse porta condimentum lectus eu feugiat. Duis leo nulla, ultricies sit amet tellus vel, molestie mattis nibh. Mauris varius sed ex eget elementum. Donec nunc diam, vehicula sed ipsum nec, pellentesque aliquet velit. Nulla facilisi. Mauris pretium dignissim diam, in congue nibh vestibulum eu. Aliquam id justo at tellus rhoncus maximus. Phasellus efficitur turpis magna, nec tempus quam sagittis et.</p>
</div>
<div class="width-6-12 width-12-12-m video-container">
<iframe src="https://www.youtube.com/embed/Ob_jpoWRCwg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Feature Highlights Bands - Inline with images</h5></div>
</div>
<div class="component-wrapper highlights-inline-images-band">
<div class="width-12-12 highlights-inline-block">
<h2>Primary feature of this software</h2>
<div class="grid-wrapper">
<div class="width-4-12 width-12-12-m">
<img src="/assets/images/square-placeholder.png">
</div>
<div class="width-8-12 width-12-12-m block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
</div>
<div class="width-12-12 highlights-inline-block">
<h2>Secondary feature of this software</h2>
<div class="grid-wrapper">
<div class="width-4-12 width-12-12-m">
<img src="/assets/images/square-placeholder.png">
</div>
<div class="width-8-12 width-12-12-m block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
</div>
<div class="width-12-12 highlights-inline-block">
<h2>Tertiary feature of this software</h2>
<div class="grid-wrapper">
<div class="width-4-12 width-12-12-m">
<img src="/assets/images/square-placeholder.png">
</div>
<div class="width-8-12 width-12-12-m block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Feature Highlights Bands - Inline without images</h5></div>
</div>
<div class="component-wrapper highlights-inline-images-band">
<div class="width-12-12 highlights-inline-block">
<h2>Primary feature of this software</h2>
<div class="grid-wrapper">
<div class="width-12-12 block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
</div>
<div class="width-12-12 highlights-inline-block">
<h2>Secondary feature of this software</h2>
<div class="grid-wrapper">
<div class="width-12-12 block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
</div>
<div class="width-12-12 highlights-inline-block">
<h2>Tertiary feature of this software</h2>
<div class="grid-wrapper">
<div class="width-12-12 block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Feature Highlights Band - Alternating with images</h5></div>
</div>
<div class="component-wrapper highlights-alternating-images-band">
<div class="width-12-12 highlights-alternating-inline-block">
<div class="grid-wrapper">
<div class="width-8-12 width-12-12-m block-content">
<h2>Primary feature of this software</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
<div class="width-4-12 width-12-12-m block-image">
<img src="/assets/images/placeholder.png">
</div>
</div>
</div>
<div class="width-12-12 highlights-alternating-inline-block">
<div class="grid-wrapper">
<div class="width-4-12 width-12-12-m block-image">
<img src="/assets/images/placeholder.png">
</div>
<div class="width-8-12 width-12-12-m block-content">
<h2>Secondary feature of this software</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
</div>
<div class="width-12-12 highlights-alternating-inline-block">
<div class="grid-wrapper">
<div class="width-8-12 width-12-12-m block-content">
<h2>Tertiary feature of this software</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
<div class="width-4-12 width-12-12-m block-image">
<img src="/assets/images/placeholder.png">
</div>
</div>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Feature Highlights Band - Three Columns</h5></div>
</div>
<div class="component-wrapper highlights-three-columns-band">
<div class="width-4-12 width-12-12-m">
<h2>Feature 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
<div class="width-4-12 width-12-12-m">
<h2>Feature 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
<div class="width-4-12 width-12-12-m">
<h2>Feature 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Feature Highlights Band - Three Columns with images</h5></div>
</div>
<div class="component-wrapper highlights-three-columns-band">
<div class="width-4-12 width-12-12-m highlight-columns-block">
<img src="/assets/images/square-placeholder.png">
<div class="block-title"><h2>Feature 1</h2></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
<div class="width-4-12 width-12-12-m highlight-columns-block">
<img src="/assets/images/square-placeholder.png">
<div class="block-title"><h2>Feature 2</h2></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
<div class="width-4-12 width-12-12-m highlight-columns-block">
<img src="/assets/images/square-placeholder.png">
<div class="block-title"><h2>Feature 3</h2></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Download Release Band</h5></div>
</div>
<div class="component-wrapper download-release-band">
<div class="width-12-12 version-id">
<h3>Version 1.0.0</h3>
</div>
<div class="width-6-12 width-12-12-m version-table">
<table class="tg">
<tr>
<th class="" colspan="3"><div class="version-name ">Final<span class="release-date">January, 25 2018</span></div></th>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
</table>
</div>
<div class="width-6-12 width-12-12-m version-table">
<table class="tg">
<tr>
<th class="" colspan="3"><div class="version-name ">Final<span class="release-date">January, 25 2018</span></div></th>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
</table>
</div>
<div class="width-6-12 width-12-12-m version-table">
<table class="tg">
<tr>
<th class="" colspan="3"><div class="version-name ">Final<span class="release-date">January, 25 2018</span></div></th>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
<tr>
<td class="description">Java EE Full & Web Distribution</td>
<td class="licence">LGPL</td>
<td class="links">
<a href="#">zip</a>
<a href="#">tgz</a>
<a href="#">dmg</a>
</td>
</tr>
</table>
</div>
</div>
<div class="grid-wrapper">
<div class="width-12-12 component-name"><h5>Contact Form Band</h5></div>
</div>
<div class="component-wrapper contact-form-band">
<div class="width-12-12">
<h3>Receive enterprise support</h3>
<form action="" class="grid-wrapper">
<input type="text" id="fname" name="firstname" placeholder="Name" class="width-6-12" required>
<input type="text" id="lname" name="lastname" placeholder="Last Name" class="width-6-12" required>
<input type="email" id="email" name="email" placeholder="Email" class="width-6-12 width-12-12-m" required>
<input type="tel" id="phone" name="telephone" placeholder="Telephone" class="width-6-12">
<input type="text" id="company" name="company" placeholder="Company" class="width-4-12 width-6-12-m">
<input type="text" id="country" name="country" placeholder="Country" class="width-4-12 width-6-12-m">
<input type="text" id="state" name="state" placeholder="State / Province" class="width-4-12 width-6-12-m">
<textarea id="subject" name="subject" placeholder="Aditional information or questions" class="width-12-12"></textarea>
<input type="submit" value="Submit" class="width-6-12">
</form>
</div>
</div>
</div>
</div>
<div class="content project-footer">
<div class="footer-section">
<div class="logo-wrapper">
<a href="/"><img src="/assets/images/quarkus_logo_horizontal_rgb_reverse.svg" class="project-logo" title="Quarkus"></a>
</div>
</div>
<div class="grid-wrapper">
<p class="grid__item width-3-12">Quarkus is open. All dependencies of this project are available under the <a href='https://www.apache.org/licenses/LICENSE-2.0' target='_blank'>Apache Software License 2.0</a> or compatible license.<br /><br />This website was built with <a href='https://jekyllrb.com/' target='_blank'>Jekyll</a>, is hosted on <a href='https://pages.github.com/' target='_blank'>Github Pages</a> and is completely open source. If you want to make it better, <a href='https://github.com/quarkusio/quarkusio.github.io' target='_blank'>fork the website</a> and show us what you’ve got.</p>
<div class="width-1-12 project-links">
<span>Navigation</span>
<ul class="footer-links width-1-12">
<li><a href="/">Home</a></li>
<li><a href="/guides">Guides</a></li>
<li><a href="/community/#contributing">Contribute</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/get-started">Get Started</a></li>
</ul>
</div>
<div class="width-1-12 project-links">
<span>Contribute</span>
<ul class="footer-links width-1-12">
<li><a href="https://twitter.com/quarkusio">Follow us</a></li>
<li><a href="https://github.com/quarkusio">GitHub</a></li>
<li><a href="/security">Security policy</a></li>
</ul>
</div>
<div class="width-1-12 project-links">
<span>Get Help</span>
<ul class="footer-links width-1-12">
<li><a href="https://groups.google.com/forum/#!forum/quarkus-dev">Forums</a></li>
<li><a href="https://quarkusio.zulipchat.com">Chatroom</a></li>
</ul>
</div>
<div class="width-3-12 more-links">
<span>Quarkus is made of community projects</span>
<ul class="footer-links">
<li><a href="https://vertx.io/" target="_blank">Eclipse Vert.x</a></li>
<li><a href="https://microprofile.io" target="_blank">Eclipse MicroProfile</a></li>
<li><a href="https://hibernate.org" target="_blank">Hibernate</a></li>
<li><a href="https://netty.io" target="_blank">Netty</a></li>
<li><a href="https://resteasy.github.io" target="_blank">RESTEasy</a></li>
<li><a href="https://camel.apache.org" target="_blank">Apache Camel</a></li>
<li><a href="https://code.quarkus.io/" target="_blank">And many more...</a></li>
</ul>
</div>
</div>
</div>
<div class="content redhat-footer">
<div class="grid-wrapper">
<span class="licence">
<i class="fab fa-creative-commons"></i><i class="fab fa-creative-commons-by"></i> <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC by 3.0</a> | <a href="https://www.redhat.com/en/about/privacy-policy">Privacy Policy</a>
</span>
<span class="redhat">
Sponsored by
</span>
<span class="redhat-logo">
<a href="https://www.redhat.com/" target="_blank"><img src="/assets/images/redhat_reversed.svg"></a>
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
<script type="text/javascript" src="/assets/javascript/mobile-nav.js"></script>
<script type="text/javascript" src="/assets/javascript/scroll-down.js"></script>
<script src="/assets/javascript/satellite.js" type="text/javascript"></script>
<script src="https://quarkus.io/guides/javascript/config.js" type="text/javascript"></script>
<script src="/assets/javascript/search-filter.js" type="text/javascript"></script>
<script src="/assets/javascript/back-to-top.js" type="text/javascript"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。